Как я могу получить метод onChange для получения значения динамически отображаемого Select?

Question

У меня есть следующий интерфейс выбора из материала:

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

My handleChange метод получает значение MenuItem ниже со значением 20 при выборе . Я просто использовал это как тест, и Select и onChange работают нормально. Проблема заключается в div, который динамически отображается из объекта пользователя. Я хочу отображать аватар и имя пользователя в каждом MenuItem . Мне нужно упаковать их в div, потому что .map () должен иметь один родительский элемент.

Я хочу передать значение (идентификатор пользователя) выбранного MenuItem методу handleChange , но все, что я получаю, это undefined, когда пользователь выбирает щелчок.

Как я могу передать значение выбора в onChange , когда элементы Select упакованы в div?

Answer 1

Правильный способ - поместить ваше изображение в MenuItem, и вы получите значение

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