如何更改未选择选项时显示的默认文本？

Question

默认情况下，当呈现 react-select 时，我在组件上看到“Select...”。我想查看“搜索...”。

查看 docs，我假设我需要使用 noOptionsMessage 道具，它被记录为：

noOptionsMessage function = () => undefined
Text to display when there are no options

({
inputValue string required
}) => One of<
react.Node,
null
>

我不太理解文档的那部分内容。例如。这个道具似乎是一个功能。所以，我一直在尝试变体，包括以下但没有成功：

<AsyncSelect
   cacheOptions
   defaultOptions={[]}
   loadOptions={handleLoadOptions}
   onChange={handleChange}
   noOptionsMessage={()=> "Search..."}
/>

那么，解决方案是什么？

Answer 1

向 AsyncSelect 添加占位符。

    <AsyncSelect
   cacheOptions
   defaultOptions={[]}
   loadOptions={handleLoadOptions}
   onChange={handleChange}
   placeholder='Search...'
/>

您可能想要指定的常见道具包括：

autoFocus - 在安装时聚焦控件 className - 将 className 应用于控件 classNamePrefix - 将类名应用于具有给定前缀的内部元素 isDisabled - 禁用控件 isMulti - 允许用户 select 多个值 isSearchable - 允许用户搜索匹配的选项 name - 使用这个名称生成一个 HTML 输入，包含当前值 onChange - 订阅变化事件 options - 指定用户可以 select 的选项 placeholder - 更改没有选项时显示的文本 selected value - 控制当前值

如何更改未选择选项时显示的默认文本？

How to change the default text shown when no option is selected?

react-select