如何在 `react-select` 上保留断断续续的文本？

Question

我使用下面的代码来渲染多 selection react-select 组件。但我发现，当我键入任何字符并将焦点放在 select 任何项目之前时，这些字符不会保留。

import React from 'react';

import Select from 'react-select';
import makeAnimated from 'react-select/animated';
import { colourOptions } from '../data';

const animatedComponents = makeAnimated();

export default function AnimatedMulti() {
  return (
    <Select
      closeMenuOnSelect={false}
      components={animatedComponents}
      defaultValue={[colourOptions[4], colourOptions[5]]}
      isMulti
      options={colourOptions}
    />
  );
}

例如，请参见下面的屏幕截图。我输入 f 并将焦点移到其他组件上。然后 f 将从 select 组件中删除。有没有办法在 f 失去焦点时保留它？

Answer 1

您可以通过组合 inputValue、value、onInputChange 和 onChange 道具来实现这一点。

像这样

<Select
  value={this.state.value}
  onChange={value => this.setState({ value })}
  inputValue={this.state.inputValue}
  onInputChange={inputValue => this.setState({ inputValue })}
/>

您可以在 docs

中阅读更多相关信息

如何在 `react-select` 上保留断断续续的文本？

How to persist intermittent text on `react-select`?

reactjs

react-select