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

IT技术 reactjs default-value react-select
2021-04-15 04:10:29

我在使用 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>

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

6个回答

我想你需要这样的东西：

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}
  />
);
selectedValue已更改为value. 检查文档react-select.com/props
2021-05-24 04:10:29
@JosephJuhnke 首先检查问题。这是如何设置默认值。
2021-05-25 04:10:29
与 redux/react 绑定的要点是 ui 实时反映对象的值。这种方法解耦了这种绑定。考虑在减速器中设置默认值。
2021-06-09 04:10:29
棘手的是您需要将所选对象设置为“defaultValue”字段，而不是选项的值。例如 0,1,2
2021-06-16 04:10:29
defaultValue新版本中现在有字段。
2021-06-18 04:10:29

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

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>
不是根据 React 文档或智能感知它不是：reactjs.org/docs/uncontrolled-components.html#default-values
2021-05-31 04:10:29
@Alex -（对于 2 年后这里的任何人），这个问题是参考 react-select，一个组件库。您链接到的文档参考了原生 HTML 选择元素。
2021-06-07 04:10:29
谢谢，现在我知道 defaultValue 接受对象而不仅仅是值。
2021-06-13 04:10:29

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

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

好吧，那么你的解决方案解决了什么问题？也就是说，硬编码一个值？
2021-05-27 04:10:29
数据绑定的一种方式并不意味着一旦从 prop 设置的数据就不能在子组件中更改，如果愿意的话。如果defaultValue使用而不是使用，这正是会发生的情况value
2021-05-30 04:10:29
{value: 'one', label: 'One'}这里给出的情况只是一个例子。在您的应用程序中，这将是一个具有相同结构的变量/道具。
2021-06-02 04:10:29
@Toskan - 是的，这是 ReactJS 和单向数据绑定的原则之一，影响所有表单元素，而不仅仅是这个库。如果您选择拥有受控组件，则需要在 React 之外自己处理更改。这个答案讨论了它并链接到 React Docs：stackoverflow.com/questions/42522515/...
2021-06-09 04:10:29
不完整。如果您将值设置为该值，则不能再更改该值
2021-06-14 04:10:29

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

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

然后将选择元素值最初匹配到选项值。

<select 
    value={this.value} />
这是一个普通的 HTML <select> 元素，而不是一个 react-select <Select>，这就是问题所在。套管可以使一切变得不同:)
2021-05-29 04:10:29
我认为这是最好/最优雅的解决方案。我的想法正确吗？
2021-05-30 04:10:29
如果这样做，值将不会改变，您也编写了 onChange 函数来设置更改
2021-06-01 04:10:29

扩展@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
};
我明白了：警告：value道具select不应该为空。考虑使用空字符串来清除组件或undefined用于不受控制的组件。
2021-06-01 04:10:29
我也在做同样的事情，我收到了这个警告： Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).
2021-06-12 04:10:29
@AlexVentura 我已经让我的代码更完整一点，并在我的系统上进行了测试。我没有收到有关受控输入的警告。尝试根据我编辑的回复更新您的代码，然后发回您发现的内容。
2021-06-14 04:10:29
其它你可能感兴趣的问题
上一篇react-hooks如何确定它们用于的组件？ 下一篇Axios 有 CORS 问题