如何使用 React 和 Material UI 訪問列表中所選項目的索引？

Question

我需要傳遞 onChange 所選菜單項的索引，但不知道如何訪問它。

     const handleListChange = (e) => {
       console.log('Item Index: ', e.target.key);
     }


      <TextField
        select
        label="Select item"
        value={show}
        onFocus={getListArray}
        onChange={e => handleListChange(e)}
      >
        {listArray.map((value, index) =>
          <MenuItem
            key={index}
            value={value.title}
          >
            {value.title}
          </MenuItem>
        )}
      </TextField>

Answer 1

您可以使用map獲取標題數組，使用indexOf獲取所選項目的索引。

這里是 ES6 和箭頭語法，更簡單：

const handleListChange = (e) => {
  const index = listArray.map(item => item.title).indexOf(e.target.value);
  console.log(index);
}