react-select 2 设置值/标签

Question

我正在使用 react-select 2 并尝试在需要执行更新从服务器获取的某些数据的表单上设置值。

我试过解决办法：

handleSelectChange(selectedOption){
 this.setState({ selectedOption });
}

const options = [
  { value: 'Value 1', label: 'Value 1' },
  { value: 'Value 2', label: 'Value 2' },

]

<Select
   options={options}
   onChange={(selectedOption)=>this.handleSelectChange(selectedOption)}
   autoFocus={true}
   value={options.find(option => option.value === data.valueTyppe)}

/>

通过使用它，不可能在选择输入中更改（视觉上）标签 - 选择时的值更改但标签保持为由 data.ValueType 定义的标签。

Answer 1

我认为您的问题来自不允许完全控制 Select 输入。 Select 输入的值应该是组件状态值属性，与 onChange 回调相同。

return(
      <Select
      options={options}
      onChange={this.handleSelectChange}
      autoFocus={true}
      value={this.state.selectedOption}
   />

试试这个工作示例

Answer 2

我已经使用了这个解决方案，它对我有用。 第一个值/标签对设置为在具有值 === data.FacilityType（数据库中保存的字符串）的选项中定义。

然后它启用选项的更改，其中值/标签对也在 Select 中更新。

<Select
  options={options}
  onChange={(selectedOption)=>this.handleSelectChange(selectedOption)}
  autoFocus={true}
  defaultValue={options.find(option => option.value === data.facilityType)}

/>