如何在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>

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

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

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

Answer 3

如果你来这里是为了反应选V2,以及仍然存在问题-第2版现在只接受一个对象作为value,defaultValue等等.

也就是说,尝试使用value={{value: 'one', label: 'One'}},而不仅仅是value={'one'}.

Answer 4

我遇到了类似的错误.确保您的选项具有值属性.

<option key={index} value={item}> {item} </option>

然后将selection元素值最初匹配到options值.

<select 
    value={this.value} />

Answer 5

使用 defaultInputValue 属性，如下所示：

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

          

更多参考https://www.npmjs.com/package/react-select

Answer 6

扩展@isaac-pak 的回答，如果您想将默认值传递给 prop 中的组件，您可以将其保存在 componentDidMount() 生命周期方法中的 state 中，以确保第一次选择默认值。

请注意，我已更新以下代码以使其更完整，并使用空字符串作为每个注释的初始值。

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.target.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Answer 7

当我遵循上面所有的答案时，我想到，我应该写这个。

您必须设置 prop value，而不是DefaultValue。我花了几个小时使用它，阅读文档，他们提到使用 DefaultValue，但它不起作用。正确的方法是，

options=[{label:'mylabel1',value:1},{label:'mylabel2',value:2}]
seleted_option={label:'mylabel1',value:1}

<Select
options={options}
value={selected_option}/>