使用 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 。