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

/>