Javascript 使用react select时重置值

我正在使用选择下拉列表。我遇到的问题是，如果用户改变主意，没有空选项来重置下拉列表值

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

我的代码如下所示，并且有一个

从“React”导入React； 从“反应选择”导入选择

const-App=（）=>{
常量选项=[
{值：“巧克力”，标签：“巧克力”}，
{值：“草莓”，标签：“草莓”}，
{值：“香草”，标签：“香草”}
];
返回；
}
常量下拉列表=（{options}）=>{
const options WithEmptyOption=[{value:，label:}，…options]；
返回；
};

请检查这个

import React，{Component}来自'React'；
从“反应选择/可创建”导入可创建选择；
从“./docs/data”导入{colorOptions}；
导出默认类CreatableSingle扩展组件{
handleChange=（newValue:any，actionMeta:any）=>{
console.group（“值已更改”）；
console.log（newValue）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
handleInputChange=（inputValue:any，actionMeta:any）=>{
console.group（“输入已更改”）；
console.log（输入值）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
render（）{
返回(
);
}
}

请检查这个

import React，{Component}来自'React'；
从“反应选择/可创建”导入可创建选择；
从“./docs/data”导入{colorOptions}；
导出默认类CreatableSingle扩展组件{
handleChange=（newValue:any，actionMeta:any）=>{
console.group（“值已更改”）；
console.log（newValue）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
handleInputChange=（inputValue:any，actionMeta:any）=>{
console.group（“输入已更改”）；
console.log（输入值）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
render（）{
返回(
);
}
}

空Unicode 我在选项中添加行，并在撇号之间写空unicode，如下所示：⠀⠀⠀⠀⠀⠀⠀⠀ .. 你可以标记它，但看不到它

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

我要改变这一点：

return <Select options={options} />;

返回；

空Unicode 我在选项中添加行，并在撇号之间写空unicode，如下所示：⠀⠀⠀⠀⠀⠀⠀⠀ .. 你可以标记它，但看不到它

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

我要改变这一点：

return <Select options={options} />;

返回；

关于

const options with emptyoption=[{value:null，label:“Select…”

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

据我所知，您必须为value
null
（如果没有）或
string
。。。对于
标签
，#1也一样，因为用户UX和second所以react select知道显示什么。但是如果你真的需要保留黑色，你可以尝试在样式中进行修改，以便拥有与其他选项相同的
高度

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

据我所知，您必须为value
null
（如果没有）或
string
。。。对于
标签
，#1也一样，因为用户UX和second所以react select知道显示什么。但是，如果您确实需要将其保留为黑色，您可以尝试在样式中进行修改，以使其具有与其他选项相同的高度。
理想情况下，在此处使用堆栈片段（工具栏按钮
[]
）。堆栈代码段支持React，包括JSX。很多人所做的并不一定正确。场外示例存在两个问题：1。人们必须离开现场才能使用它们。2.如果外部链接消失，那么问题就变得毫无用处了。@T.J.Crowder这条蓝线就是我用这一行添加的
const options WithEmptyOption=[{value:，label:}，…options]这并不是开箱即用的，但我觉得一定有一些东西，因为我认为这是一个有效的用例，出于某种原因，我假设您没有将其包括在示例中，所以演示了这个问题。只是没有引起足够的注意。理想情况下，在这里制作可运行的示例，使用堆栈片段（
[]
工具栏按钮）进行现场操作。堆栈代码段支持React，包括JSX。很多人所做的并不一定正确。场外示例存在两个问题：1。人们必须离开现场才能使用它们。2.如果外部链接消失，那么问题就变得毫无用处了。@T.J.Crowder这条蓝线就是我用这一行添加的
const options WithEmptyOption=[{value:，label:}，…options]这并不是开箱即用的，但我觉得一定有一些东西，因为我认为这是一个有效的用例，出于某种原因，我假设您没有将其包括在示例中，所以演示了这个问题。只是没有足够的注意。好吧，我明白了，如果
x
像那样存在，它是可以清除的。在我正在使用的设计中，没有
x
无论如何，用户必须执行一些操作来取消选择所选的值OK，我知道，如果
x
是这样的，它是可清除的。在我正在使用的设计中，没有
x
无论如何，用户必须执行一些操作来取消选择所选值这是我已经在做的事情，好吧，我不明白你的意思，你知道吗