Question

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

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

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

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

在我的示例中，您将看到默认情况下选择了Jim，但是，一旦将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

受到史蒂夫公认答案的启发。我将无状态组件转换为类组件，并为其提供了默认状态并处理了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}
      />
    );
  }
}

无法更改反应选择字段的默认值

2 个答案: