0

考虑这个

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>

当它加载时，我只想预先选择“男性”，因为 const 性别等于“男性”。例如，在加载时它应该如下所示：

在此处输入图像描述

我试过穿上document.getElementById("dropdown").selectedIndex = "0";componentDidMount，但没有用。这通常适用于正常的选择/选项

我如何实现这一目标？

4

1 回答 1

0

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

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

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

于 2020-06-24T07:19:00.077 回答