Question

因此，我需要将defaultValue传递给启用了多重选择的react-select组件。我已经尝试过所有我能想到的东西：字符串数组，对象数组，字符串等。似乎什么都没用。

我也在使用getOptionLabel和getOptionValue，这可能是造成这些混乱的原因吗？

Answer 1

还有一种使用 value 作为您的 defaultValue 的方法。就我而言，我使用的是“ id”和“ industry”，而不是“ label”和“ value”

this.state = {
     interested_industries: [{id:"ANY", industry:"ANY"}]
}

在“选择”组件中：-

<Select 
    name="interested_industries"
    options={industries}
    value={interested_industries}
    getOptionLabel={ x => x.id}
    getOptionValue={ x => x.industry}
    onChange={this.handleSelect}
    isMulti
/>

Answer 2

如果您参考react-select文档，请选择将defaultValue设置为多个值的方法：

<Select
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
/>

options的结构是

[ 
  {
      label: <string>,
      value: <string>,
    } 
]

工作示例here。

Answer 3

您可以设置 defaultValue 不带索引

<Select
  defaultValue={existingItems}
  onChange={(option) => onChangeSelect(option)}
  closeMenuOnSelect={false}
  components={animatedComponents}
  isMulti={true}
  options={options}
/>

但要使其正常工作，如果您从服务器加载，则需要等待从 defaultValue 加载项目例如我的完整代码

{!kindsByRestaraunt.loading ? (
  <Select
  defaultValue={existingItems}
  onChange={(option) => onChangeSelect(option)}
  closeMenuOnSelect={false}
  components={animatedComponents}
  isMulti={true}
  options={options}
/>
): ""}

Answer 4

defaultValue 接受对象或对象数组。这里的对象可以是这样的：

defaultValue = {{ value: 0, label: "John" }}

这也是一种方式：

defaultValue = { array1[0] }

如果您想要多个选项的对象数组 (isMulti)，您可以这样做：

defaultValue = { array1.map(ele => ele) }

其中 array1 是一个对象数组。

array1 = [
    { label: "John", value: 0 },
    { label: "Indiana", value: 1 },
    { label: "Stark", value: 2 },
];

这个解决方案对我有用。我希望这也能帮到你。

如何为多重选择设置defaultValue？

4 个答案: