javascript - 使用react-select时重置值

Question

我正在使用react-select对于我的选择下拉菜单。我遇到的问题是，如果用户改变主意，没有空选项可以重置下拉值。

目前我正在采取选项并手动添加一个空字符串，但我觉得库中一定已经有一些东西可以处理这个问题？我在文档中找不到任何内容。

我的代码如下所示，其中有一个 code sandbox here .

从“react”导入React；导入从“react-select”中选择；

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" }
  ];

  return <Dropdown options={options} />;
}

const Dropdown = ({ options }) => {
  const optionsWithEmptyOption = [{ value: "", label: "" }, ...options];
  return <Select options={optionsWithEmptyOption} />;
};

Answer 1

请检查一下

https://codesandbox.io/s/zow1c?module=/example.js

import React, { Component } from 'react';

import CreatableSelect from 'react-select/creatable';
import { colourOptions } from './docs/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}
      />
    );
  }
}