無法在 Material UI React 中獲取選擇下拉列表的名稱屬性

Question

我正在嘗試實現選擇下拉菜單，但在處理 onChange 方法時，我將event.target.name設為未定義。當我選擇第一個選項時，我需要訪問“英語”。 我怎么做。

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對象的屬性名稱是什么。 它是您的Select組件的name ，而不是MenuItem某些文本。

據我了解您要實現的目標，您必須使用對象作為值而不是字符串。 例如 - { name: 'English', code: 'en' } 。

這是帶有工作示例的代碼沙盒。 不幸的是，從代碼中，您無法找出什么是{fixed} 、 <LanguageIcon> 、 <Trans>等。因此無法完全適應它