使用 react-select 时重置值

Question

我正在为我的选择下拉列表使用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}
      />
    );
  }
}

Answer 2

空的 Unicode

我在选项中添加一行，并在撇号之间写下这样的空 unicode：⠀⠀⠀⠀⠀⠀⠀⠀ ..你可以标记它但看不到它。

const options = [
    { value: "", label: "⠀" },
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" }
  ];

我改变了这一点：

return <Select options={options} />;

Answer 3

const optionsWithEmptyOption = [{ value: null, label: "Select..." }, ...options];

我不太擅长解释，但@NicoHaase 是对的，所以这里是......

据我所知，您必须为null （如果没有）或string值提供一个值...相同的label ，#1 因为用户 UX 而第二个所以 react-select 知道要显示什么。 但是如果你真的需要把它留成黑色，你可以尝试在样式中进行修改，以便与其他选项具有相同的height 。