无论如何要预 select 确切的下拉值？ - 反应 js + material ui

Question

考虑一下

render() {

const { gender } = this.state
}

return (
  <div>

            <FormControl variant="outlined">
              <InputLabel>Gender</InputLabel>
              <Select id="dropdown">
                <MenuItem value={10}>Male</MenuItem>
                <MenuItem value={20}>Female</MenuItem>
              </Select>
            </FormControl>


  </div>

加载时，我只想预选“男性”，因为常量性别等于“男性”。例如。在加载时它应该是这样的：

我试过将 document.getElementById("dropdown").selectedIndex = "0"; 放在 componentDidMount 上，但没有成功。通常在正常情况下工作 select/option

如何实现？

Answer 1

默认情况下应该选择第一个条目，但如果选项的顺序不同，您可以指定默认初始值。这可以设置为初始状态或任何生命周期函数。

使用直接 DOM 操作是一种反应反模式，坚持使用状态 and/or 道具来驱动组件生命周期。

<Select value={10} id="dropdown">

简单演示

ReactDOM.render(
  <React.StrictMode>
    <select value={30}>
      <option value={10}>Male</option>
      <option value={20}>Female</option>
      <option value={30}>Non-binary</option>
    </select>

    <select>
      <option value={10}>Male</option>
      <option value={20}>Female</option>
      <option value={30}>Non-binary</option>
    </select>

    <select value={10}>
      <option value={10}>Male</option>
      <option value={20}>Female</option>
      <option value={30}>Non-binary</option>
    </select>
  </React.StrictMode>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<body>
  <div id="root" />
</body>

无论如何要预 select 确切的下拉值？ - 反应 js + material ui

Anyway to pre-select exact drop down value? - react js + material ui

drop-down-menu

reactjs

material-ui

dropdown