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

试试这个工作examle

Answer 2

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

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

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

/>

Answer 3

你可以用这个

<Select
  getOptionLabel={option => option.name}
  getOptionValue={option => option.id}
  options={items}
/>