时间戳

首页 > 解决方案 > 未选择任何选项时如何更改显示的默认文本？

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

问题描述

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

查看文档，我假设我需要使用 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..."}
/>

那么，解决方案是什么？

标签： react-select

解决方案

将占位符添加到 AsyncSelect。

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

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

autoFocus - 挂载时聚焦控件 className - 将类名应用于控件 classNamePrefix - 将类名应用于具有给定前缀的内部元素 isDisabled - 禁用控件 isMulti - 允许用户选择多个值 isSearchable - 允许用户搜索匹配options name - 使用此名称生成一个 HTML 输入，包含当前值 onChange - 订阅更改事件 options - 指定用户可以从 占位符中选择的选项 - 更改未选择选项时显示的文本 value - 控制当前值

推荐阅读