如何使用 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);
}