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

Question

我正在使用 redux-form and have a custom component that uses react-select。

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

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

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

在我的示例中，您会看到默认情况下 Jim 是 selected，但是一旦您将 select 选项更改为其他选项，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 公认答案的启发。我将我的无状态组件转换为 class 组件并为其设置了默认状态并处理了 onChange。

这是其他可能需要解决方案的 codesandbox - 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}
      />
    );
  }
}

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

Unable to change default value for react-select field

javascript

reactjs

react-select

redux-form