React-Select：能否在options数组中声明selected实现默认选中？

嘿，直接在options数组里给选项加selected属性是行不通的哦！React-Select并不支持这种原生HTML select的写法，它的选中状态是通过组件自身的属性来控制的，下面给你两种常用的实现方式：

非受控模式（适合无需手动维护状态的场景） #

使用defaultValue属性，传入你想要默认选中的那个选项对象（要和options里的value和label完全匹配）：

<Select
  onChange={this.changeUser}
  defaultValue={{ value: 2, label: 2 }}
  options={[
    { value: 1, label: 1 },
    { value: 2, label: 2 },
    { value: 3, label: 3 }
  ]}
/>

受控模式（适合需要主动控制选中状态的场景） #

通过组件的状态来维护选中值，配合value属性使用：

class UserSelector extends React.Component {
  // 初始化状态时设置默认选中项
  state = {
    selectedUser: { value: 2, label: 2 }
  };

  changeUser = (selectedOption) => {
    this.setState({ selectedUser: selectedOption });
  };

  render() {
    const { selectedUser } = this.state;
    return (
      <Select
        value={selectedUser}
        onChange={this.changeUser}
        options={[
          { value: 1, label: 1 },
          { value: 2, label: 2 },
          { value: 3, label: 3 }
        ]}
      />
    );
  }
}

多选场景的补充 #

如果是多选的Select组件（设置isMulti={true}），只需要把defaultValue或value改成数组形式即可：

<Select
  isMulti
  onChange={this.changeUsers}
  defaultValue={[{ value: 2, label: 2 }]}
  options={[/* 选项数组 */]}
/>

简单总结下：React-Select的选中逻辑和原生select不同，别再想着给options加selected啦，用defaultValue或value才是正确姿势~

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