React中循环渲染select标签option时如何使用selected属性设置默认选中

React 中循环渲染 select 选项实现默认选中的两种方案 #

React 不推荐直接给 option 加 selected 属性，建议用以下两种方案实现需求：

方案1：使用受控组件（React 官方推荐） #

适合需要后续对选中值做联动、校验等逻辑的场景，选中值全程由 state 控制：

1. 先在构造函数中初始化 state 存储默认选中值

constructor(props) {
  super(props);
  this.state = {
    selectedPhoneType: 'Mobile' // 配置默认选中值
  };
  this.phoneTypes = ['Mobile', 'Home', 'Office'];
}

2. 给 select 绑定 value 属性和 onChange 事件同步 state

<select 
  value={this.state.selectedPhoneType}
  onChange={(e) => {
    // 同步选中值到state
    this.setState({ selectedPhoneType: e.target.value });
    // 保留原有业务逻辑
    this.handleChangePhonetype(e, index);
  }}
>
  {this.phoneTypes.map((phoneType, index) => {
    return (
      <option key={index} value={phoneType} name="type">
        {phoneType}
      </option>
    );
  })}
</select>

方案2：使用非受控组件（适合简单场景） #

如果不需要后续控制选中值，仅需要初始化默认选中，直接给 select 加 defaultValue 属性即可：

phoneTypes = ['Mobile', 'Home', 'Office'];
...
<select 
  defaultValue="Mobile"
  onChange={(e) => this.handleChangePhonetype(e, index)}
>
  {this.phoneTypes.map((phoneType, index) => {
    return (
      <option key={index} value={phoneType} name="type">
        {phoneType}
      </option>);
   })}
</select>

注意不要同时给 select 配置 value 和 defaultValue，defaultValue 仅在组件首次渲染时生效，后续修改该属性不会更新选中值。

内容的提问来源于stack exchange，提问作者Tanzeel