如何在 react-select 中设置默认值

Question

我在使用 react-select 时遇到问题。我使用 redux 表单，并且我的 react-select 组件与 redux 表单兼容。这是代码：

 const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
    />
);

以及我如何渲染它：

 <div className="select-box__container">
    <Field
    id="side"
    name="side"
    component={SelectInput}
    options={sideOptions}
    clearable={false}
    placeholder="Select Side"
    selectedValue={label: 'Any', value: 'Any'}
    />
</div>

但问题是我的下拉列表没有我希望的默认值。我做错了什么？有任何想法吗？

原文由 user7334203 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想你需要这样的东西：

 const MySelect = props => (
<Select
    {...props}
    value = {
       props.options.filter(option =>
          option.label === 'Some label')
    }
    onChange = {value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

原文由 Ved 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我使用了 defaultValue 参数，下面是我如何获得默认值以及在从下拉列表中选择一个选项时更新默认值的代码。

 <Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

原文由 TejasPancholi 发布，翻译遵循 CC BY-SA 4.0 许可协议