React Select 设置了错误的值

Question

我快被这个搞疯了。我正在为我的应用程序使用 react-select，因为我有一个巨大的表单，所以我创建了一个小组件来像这样包装选择：

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 没有 return event 我只是模拟它传递我需要的数据。

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

所以到这里我已经不明白了react-select如果value的结果是这个对象怎么会显示Male

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

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

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

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

我尝试添加几个解决方法，none 正在按预期工作。

我需要向 select 显示 selected 值，并且还需要让状态（在我的示例中对于性别）成为具有值的字符串，而不是整个对象。 ..

我做错了什么？想法？干杯

Answer 1

不幸的是，react-select 想要整个对象作为 selected 值。您基本上有 2 个选择：

将整个对象存储在当前状态。您可以 return 将价值提供给任何其他相关方。
只存储状态中的值。当您将值传递给 react-select 时，您需要对您的 options
进行查找
value={options[id].find(opt => opt.value === this.state[id].value)}

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

Answer 2

这是我之前评论的更详细的回答：

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

React Select 设置了错误的值

React Select set wrong value

javascript

reactjs

react-select