反应选择设置错误的值

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如果value的结果是这个对象，怎么能显示Male。

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

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

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

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

我尝试添加几个解决方法，但没有一个按预期工作。

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

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

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 想要整个对象作为选定的值。你基本上有两个选择：

1. 以当前状态存储整个对象。您可以将值返回给任何其他相关方。

2. 只存储状态中的值。当您将值传递给 react-select 时，您需要查找您的选项

   value={options[id].find(opt => opt.value === this.state[id].value)}

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