reactjs - react-select:禁用下拉列表
问题描述
有没有办法禁用下拉列表?我没有找到任何可以帮助我的道具。
特别是,当用户选择超过 5 个元素时,我想禁用下拉列表。
我创建了这个代码框。它并没有真正起作用,因为它没有与状态相关联:
const limit = 3;
const defaults = [colourOptions[2], colourOptions[3]];
export default () => (
<Select
defaultValue={defaults}
isMulti
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
isSearchable={defaults.length < limit}
// disableDropdown={defaults.length > limit} // <-- something like this
/>
)
解决方案
您可以通过删除组件来“禁用/删除”下拉列表;
components={{
Menu: () => null, // Remove menu
MenuList: () => null, // Remove menu list
DropdownIndicator: () => null, // Remove dropdown icon
IndicatorSeparator: () => null // Remove separator
}}
<Select
defaultValue={defaults}
isMulti
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
isSearchable={defaults.length < limit}
components={{
Menu: () => null,
MenuList: () => null,
DropdownIndicator: () => null,
IndicatorSeparator: () => null
}}
/>
推荐阅读
- c# - Datagrid列自动填充不适用于自动生成的列
- android - React-Native:致命错误:接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足
- go - Golang 本地导入
- css - 覆盖 HTML Style="" 元素
- three.js - Cannon.js 锁定两个重叠物体的约束而不会爆炸
- python - 笔画重量小于 1 像素会发生什么
- ruby-on-rails - 未初始化的常量 Types::QuotationReturnType
- java - 从毫秒转换为天后如何获得正确的日期?
- dax - DAX 公式减去列
- javascript - 如何获取名称属性(不是值),然后将其传输到文本