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

Question

我正在使用 React select 渲染一个 select 组件：

const options = [...]

<Select
 ...
 options={options}
/>

问题是，我输入的任何不在 options 内的值都不会得到 selected（当 select 组件未聚焦时，该值将消失).

有什么方法可以使 <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}
      />
    );
  }
}

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

How to allow any value to be entered in input in React-Select

javascript

reactjs

react-select