使用 react-select 时重置值答案

【问题标题】：reset value when using react-select使用 react-select 时重置值
【发布时间】：2019-12-19 03:05:03
【问题描述】：

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

目前我正在选择选项并手动添加一个空字符串，但我觉得库中必须有一些东西来处理这个？我在文档中找不到任何内容。

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

从“反应”导入反应；从“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} />;
};

【问题讨论】：

理想情况下，使用 Stack Snippets（[<>] 工具栏按钮）在这里，现场制作您的可运行示例。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
很多人的做法不一定正确。异地例子有两个问题： 1.人们必须到异地才能使用它们。 2. 它真的非常容易从您的问题中意外遗漏重要的代码/标记/配置，如果外部链接消失，问题将变得毫无用处。
@TJCrowder 蓝线是我在此行中添加的const optionsWithEmptyOption = [{ value: "", label: "" }, ...options]; 这不是开箱即用的，但我觉得一定有一些东西，因为我认为这是一个有效用例
出于某种原因，我假设您没有将其包含在示例中，因此证明了问题。只是没有给予足够的关注。

标签： javascript reactjs ecmascript-6 react-select

【解决方案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}
      />
    );
  }
}

【讨论】：

好的，我明白了，如果x 是这样的，那是可以清除的。在我正在使用的设计中，没有x
无论如何，用户必须执行一些操作来取消选择的值

【解决方案2】：

空 Unicode

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

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

我改变了这个：

return <Select options={options} />;

【讨论】：

这就是我已经在做的事情??‍♂️。 const optionsWithEmptyOption = [{ value: "", label: "" }, ...options];
好吧，我没听懂你的意思，你在寻找像 Sandeep Patel 这样的答案吗？

【解决方案3】：

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

我不太擅长解释，但@NicoHaase 是对的，所以就这样吧……

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

【讨论】：

是的，那怎么样？这是否解决了给定的问题？那么请在您的答案中添加一些解释，以便其他人可以从中学习