无法更改 react-select 字段的默认值

Question

我正在使用redux-form，并且有一个使用react-select 的自定义组件。

我创建了具有预填充选项的下拉菜单，并且还允许自定义输入到该下拉框中。我正在使用 react-select 中的“creatable”组件。

我希望能够在首次加载时将其中一个选项作为默认值，该选项也会在下拉列表中突出显示为选中状态。我已经实现了这一点，但唯一的问题是，如果我选择一个新值或创建一个新值，它将保持为默认值 - 尽管 json 确实更改为正确的值。

这是我的代码框示例 - https://codesandbox.io/s/jvzko04ok3

在我的示例中，您将看到 Jim 默认被选中，但是一旦您将选择选项更改为其他值，json 值就会更改，但视图不会更改。感觉它是 onBlur 或 onChange 问题。

多年来，react-select 文档的版本发生了变化，可以使用 value 或 defaultValue 指定默认值。

  <CreatableSelect
    {...props}
    options={props.options}
    onChange={value => input.onChange(value)}
    onBlur={() => input.onBlur(input.value)}
    value={props.options[1]}
  />

Answer 1

这是因为您已将 value 属性直接绑定到 props.options[1]，这不会改变。最好将它绑定到您默认为选项的状态变量，并让您的 onChange 更新状态变量。

Answer 2

受到 Steves 公认答案的启发。我将我的无状态组件转换为类组件并为其赋予默认状态并处理 onChange。

这里是其他可能需要解决方案的代码框 - https://codesandbox.io/s/kyr9mwpr5

从这里：

const LastNameSelectInput = ({ input, ...props }) => (
  <CreatableSelect
    {...props}
    options={props.options}
    // menuIsOpen={true}
    onChange={value => input.onChange(value)}
    onBlur={() => input.onBlur(input.value)}
    value={props.options[1]}
  />
);

到这里：

  class LastNameSelectInput extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { value: this.props.options[1] };

  render() {
    const { input, options } = this.props;
    return (
      <CreatableSelect
        options={options}
        // menuIsOpen={true}
        onChange={value => {
          let newValue = input.onChange(value);
          this.setState({ value: newValue });
        }}
        onBlur={() => input.onBlur(input.value)}
        value={this.state.value}
      />
    );
  }
}