React.js MaterialUI：如何将 materiaUI select 下拉列表的值与对应的列表项值绑定？

Question

我有一个用户列表和一个来自 material UI 的 Select 下拉列表，其中包含一些值。我可以 console.log select 的值，但我怎么知道他们指的是列表中的哪个用户？

   <List>
    {userList.map((user:any) => (
      <ListItem  key={user.key}>
        <ListItemAvatar>
          <Avatar>
            <PersonIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary={user.name} />
        <Select
                 
                 value={userValue}
                 
                 onChange={handleChange}
                 
               >
                 {dropdownvalues.map(
                   (g: { value: string}) => (
                     <MenuItem key={g.value} value={g.value}>
                       {g.value} 
                     </MenuItem>
                   )
                 )}
               </Select>
      </ListItem>
    ))}

    
  </List>
  
   const handleChange=(e:any,index:any) => {
console.log(e.target.value)//here I am able to console log just the value how can I bind the user too given the fact that this funciton doesnt accept another parameter

}

Answer 1

最简单的方法是扩展您的 handleChange 函数并像这样调用：

  // ...
  onChange={(evt) => handleChange(user)}
  // ... And then extend the function:
  const handleChange=(user:any) => {
     console.log(user)
  }

Answer 2

只需添加索引作为值，因为它在以下代码中是唯一可识别的 -

        {dropdownvalues.map(
                   (g: { value: string},index:number) => (
                     <MenuItem key={g.value} value={index}>
                       {g.value} 
                     </MenuItem>
                   )
                 )}

之后只需以 -

身份访问您选择的用户

const handleChange = (e:any) => {
const selectedInd = e.target.value;
console.log('index->',selectedInd);
console.log(dropdownvalues[e.target.value]);
}

React.js MaterialUI：如何将 materiaUI select 下拉列表的值与对应的列表项值绑定？

React.js MaterialUI: How to bind the value of a materiaUI select dropdown with the corrispective list item value?

javascript

drop-down-menu

reactjs

material-ui