如何获取 onChange 方法来获取动态呈现的 Select 的值？

Question

我有以下从 Material UI 中选择的内容：

                    <FormControl className='select-form'>
                        <InputLabel id="demo-simple-select-outlined-label">Choose User</InputLabel>
                        <Select
                            labelId="demo-simple-select-outlined-label"
                            id="demo-simple-select-outlined"
                            value={this.state.userId}
                            onChange={this.handleChange}
                            label="choose-user"
                        >
                            {Object.keys(users).map(uId => (  
                                <div key={uId}className='select-menu'>
                                    <img 
                                        src={''}
                                        alt={`Avatar of me`}
                                        className='signin-avatar'
                                    />                                              
                                    <MenuItem value={30}>{users[uId].name}</MenuItem>
                                </div>             
                            ))}
                            <MenuItem value={20}>Hello</MenuItem>
                        </Select>
                    </FormControl>

我的 handleChange 方法获取下面 MenuItem 的值，选中时值为 20。我只是将其用作测试，并且 Select 和 onChange 工作得很好。 问题是从用户对象动态呈现的 div。我想在每个 MenuItem 中呈现一个头像和用户名。我必须将它们打包在一个 div 中，因为 .map() 需要有一个父项。

我想将所选 MenuItem 的值（用户 ID）传递给 handleChange 方法，但是当单击用户选择时，我得到的只是未定义.

当 Select 项目打包在 div 中时，如何将 select 的值传递给 onChange 方法？

Answer 1

正确的做法是把你的图片放在MenuItem里面，你就会得到值

  {
    Object.keys(users).map((uId) => (
      <MenuItem value={uId}>
        <img src={''} alt={`Avatar of me`} className="signin-avatar" />
        {users[uId].name}
      </MenuItem>
    ));
  }