如何允许在React-Select中输入任何值

Question

我正在使用react select来渲染一个select组件:

const options = [...]
<Select
...
options={options}
/>

问题是，我键入的任何值不在options内都不会被选中(当选择组件不集中时，值将消失)。

是否有任何方法使<Select/>更多的建议组件，为options提供自动完成，但也允许输入任何值?

Answer 1

您可以使用creatable组件来实现:

来自react-select

的示例

import React, { Component } from 'react';
import CreatableSelect from 'react-select/creatable';
import { colourOptions } from '../data';
export default class CreatableSingle extends Component<*, State> {
handleChange = (newValue: any, actionMeta: any) => {
console.group('Value Changed');
console.log(newValue);
console.log(`action: ${actionMeta.action}`);
console.groupEnd();
};
handleInputChange = (inputValue: any, actionMeta: any) => {
console.group('Input Changed');
console.log(inputValue);
console.log(`action: ${actionMeta.action}`);
console.groupEnd();
};
render() {
return (
<CreatableSelect
isClearable
onChange={this.handleChange}
onInputChange={this.handleInputChange}
options={colourOptions}
/>
);
}
}