javascript - 无法更改 react 选择字段的默认值

Question

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

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

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

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

在我的示例中，您会看到 Jim 默认处于选中状态，但是一旦您将选择选项更改为其他内容，json 值就会发生变化，但 View 不会。感觉它是 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 属性直接绑定(bind)到 props.options[1]，这不会改变。最好将它绑定(bind)到您默认为该选项的状态变量，并让您的 onChange 更新状态变量。