Question

我为此感到疯狂。我正在为我的应用程序使用react-select，由于我的表单很大，因此我创建了一个小组件来包装Selects，如下所示：

const SelectField = (props) => {
  const { id } = props;
  return (
    <Select
      id={id}
      value={this.state[id]}
      onChange={(value) => { this.onChangeValue({ target: { id, value } }); }}
      options={options[id]}
      placeholder="Please select..."
    />
  );
};

我这样使用它：

<SelectField id="gender" />

onChangeValue方法处理所有输入的setState：

onChangeValue(e) {
  const { id, value } = e.target;
  this.setState({ [id]: value });
}

由于react-select出于某种奇怪的原因没有返回event，因此我只是通过传递所需的数据来模拟它。

此版本的代码似乎可以按预期工作，如果我选择某些内容，则可以在输入中正确看到正确的值。不幸的是，在值不正确的状态下，它应该是string，但是它是整个选项：{ label: 'Gender', value: 'Male'}。

所以在这里我已经不明白如果值的结果是此对象，react-select将如何显示Male。

如果我像下面这样更改onChange：

onChange={(value) => { this.onChangeValue({ target: { id, value: value.value } }); }}

这对我来说更有意义，因为我直接将正确的值传递给要在状态中设置的值。

突然，这根本不起作用。如果我选择一个选项，输入仍会显示占位符，但是，是的，状态是正确的。

我尝试添加几种解决方法，但均未按预期工作。

我需要将选择的值显示给select并让状态（对于我的示例中的性别）为带有值的字符串，而不是整个对象...

我在这里做错了什么？有想法吗？干杯

Answer 1

以下是我较早评论的详细信息：

class SelectField extends React.Component {

    state = {
        id: this.props.id
    };

    onChangeValue = id => value {
        this.setState({ [id]: value });
    }

    render() {
        const { id } = this.state;
        return (
            <Select
                id={id}
                value={this.state[id]}
                onChange={this.onChangeValue(id)}
                options={options[id]} // unsure where options came from.
                placeholder="Please select..."
            />
        );
    }
}

Answer 2

不幸的是，react-select希望将整个对象作为所选值。您基本上有2个选择：

按当前状态存储整个对象。您可以将值返回给任何其他感兴趣的人。
仅存储状态值。当您将值传递给react-select时，您将需要对您的选项进行查找

value = {options [id] .find（opt => opt.value === this.state [id] .value）}

此外，没有理由将其存储在state [id]中。您可以将其存储为state.value或selectedValue，因为它是该组件唯一处于状态的东西。

React Select设置错误的值

2 个答案: