Не удалось получить свойство name выбранного выпадающего меню в Material UI React

Question

Я пытаюсь реализовать выпадающий список, но при обработке метода onChange я получаю event.target.name как неопределенное. Когда я выбираю 1-й вариант, мне нужно получить доступ к 'Engli sh'. Как мне это сделать.

const [lang, setLang] = React.useState('')

  const handleChange = event => {

    setLang(event.target.value)
  }
<Select
  id="demo-simple-select"
  value={lang}
  onChange={handleChange}
  displayEmpty
  className={classes.selectEmpty}
  renderValue={value => (
    <div>
      {fixed} <span>{value}</span>
    </div>
  )}
  MenuProps={{
    transformOrigin: {
      vertical: "top",
      horizontal: "right"
    },
    getContentAnchorEl: null
  }}
>
  <MenuItem value="" disabled>
    <LanguageIcon className={classes.content} />
    <span>
      <Trans>Languages</Trans>
    </span>
  </MenuItem>
  <MenuItem value={"en"}>English</MenuItem>
  <MenuItem value={"ja"}>
    <span>
      <Trans>日本語 (Japanese)</Trans>
    </span>
  </MenuItem>
</Select>;

Answer 1

Я думаю, вы не поняли, что такое имя атрибута из объекта event.target. Это name вашего Select компонента, а не определенный текст для MenuItem.

Насколько я понял, вы пытаетесь достичь, вы должны использовать объекты для значений, а не строку. Например - { name: 'English', code: 'en' }.

Вот коды и коробка с рабочим примером . К сожалению, из предоставленного вами кода невозможно выяснить, что такое {fixed}, <LanguageIcon>, <Trans>, et c. Так что не смог полностью его адаптировать