Javascript 从“选择”（材质UI）获取所选菜单项道具

我的显示组件

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>
)
}

const myComponent=（{title，data，errors，onSubmit，groups}）=>{
常量[状态，设置状态]=使用状态(
Object.assign(
{
用户名：“”，
密码：“”，
组：“，
伊萨明：错，
},
数据| |{}
)
常量handleGroupChange=（事件）=>{
console.log（event.target）；
设定状态({
组：event.target.value
})
}
返回(
组
{
组长度>0(
groups.map（（组）=>{
控制台日志（组）；
返回{group.name}
})
)：无组
}
)
}

行为

groups

通过容器组件传递。我可以访问

event.target.value

{value-->group.name，name-->未定义}

但是

---

我无法访问

id

道具。我希望id和value道具都存储在

状态。group

。我尝试了

MenuItem

和

选项
元素和
NativeSelect
。我该怎么做？
您可以从每个菜单项中获取id，并以这样的状态存储。setState({
组：{id:even.target.id，值：even.target.value
})在handleGroupChange内部，确保将状态组更改为对象类型
您可以从每个菜单项中获取id，并以如下状态存储。setState({
组：{id:even.target.id，值：even.target.value
})在handleGroupChange内部，确保将状态组更改为对象类型
event.target.id未定义。
event.target
只有
值
和
名称
好的，在handleGroupChange中，使用e.target.value（组名称）过滤组数组，您将拥有整个对象，然后您可以将整个对象分配到状态如果你想在任何地方使用该值，则event.target.id是未定义的。
event.target
只有
value
&
name
好的，在handleGroupChange中，使用e.target.value（组名）过滤组数组，你将拥有整个对象，然后你可以将整个对象分配到状态，并在任何你想使用的地方使用该值