javascript - 当选择未获得焦点时，React-Select 输入内容消失

Question

我已经愉快地使用了一段时间的 react-select，但是我遇到了关于组件的 Creatable 版本的问题。

这是我的代码:

const options = [
  {
    label: 'One',
    value: 'One'
  },
  {
    label: 'Two',
    value: 'Two'
  },
  {
    label: 'Three',
    value: 'Three'
  },
  {
    label: 'Four',
    value: 'Four'
  }
];

const selectedItems = [
  {
    label: 'One',
    value: 'One'
  }
];

const App = () => (
  <div style={styles}>
    <Select.Creatable
      backspaceRemoves={true}
      multi
      openOnFocus={false}
      openOnClick={false}
      onSelectResetsInput={false}
      onBlurResetsInput={false}
      onCloseResetsInput={false}
      arrowRenderer={() => null}
      clearRenderer={() => null}
      options={options}
      value={selectedItems} />
  </div>
);

我还在这里创建了一个可运行的版本:https://codesandbox.io/s/q27lnon96

如您所见，如果您访问 Sandbox 页面，当用户点击离开时，输入到选择中的任何文本都会消失。如果选择再次获得焦点，它会重新出现。

明确地说，我的问题是关于在输入中输入的文本“two”——这不是所选值的问题(如果配置了正确的状态和回调，这些值就可以正常工作)。

如何让 react-select 保留输入的内容？看起来它在内部记住了这个值，但是当它不再有焦点时隐藏了文本输入。我认为将各种 onFooResetsInput 全部设置为 false 可以实现此目的，但效果并不理想。

我的应用程序使用输入此输入的文本值来影响 UI 的其他元素，因此当文本被隐藏时它看起来不同步。

• react-select 版本:1.2.1(最新)
• react 和 react-dom 版本:15或 16(都表现出这种行为)

Answer 1

您需要处理 onChange 事件并使 selectedItems 成为组件状态的一部分。在你的情况下，selectedItems 永远不会改变。

看看https://codesandbox.io/s/pyo17y6qv7

编辑

是的，它适用于 inputRenderer。函数的默认参数将值传递给输入(这就是输入值消失的原因，因为当它处于 onBlur 状态时，它会将值“”传递给输入。可能是 react-select 上的错误，因为我们的 onBlurResetsInput 标志为 false)所以我们需要在将它传递给我们自己的输入之前将其删除。更新了 https://codesandbox.io/s/54on0mr984 上的代码