从 Select (Material UI) 中获取选定的 MenuItem 道具

Question

我的显示组件

const myComponent = ({ title, data, errors, onSubmit, groups }) => {

  const [state, setState] = useState(
    Object.assign(
      {
        username: "",
        password: "",
        group: "",
        isAdmin: false,
      },
      data || {}
    )
const handleGroupChange = (event) => {

    console.log(event.target);
    setState({
      group: event.target.value
    })
  }

return (
<FormControl className={styles.formControl}>
          <InputLabel id="group-select">Groups</InputLabel>
          <Select
            id="group-select"  
            value={state.group}
            onChange={handleGroupChange}
            >
            {
              groups.length > 0 ? (
                groups.map((group) => {
                  console.log(group);
                  return <MenuItem key={group._id} id={group._id} value={group.name}>{group.name}</MenuItem>
              })
              ) : <MenuItem>No Groups</MenuItem>
            }
            </Select>
      </FormControl>
)
}

行为

groups是通过容器组件传递的，我可以访问event.target.value

{ value --> group.name, name --> undefined }

但是 我无法访问 id 道具。我希望 id 和 value 道具都存储在 state.group 中。我尝试使用MenuItem 和option 元素和NativeSelect。我怎样才能做到这一点？

Answer 1

您可以从每个菜单项中获取 id 并以这样的状态存储 this.setState({ 组：{ id：even.target.id，值：even.target.value }) 在 handleGroupChange 内部，并确保将状态组更改为对象类型