javascript - 如何设置可以在 react-select 中选择的最大项目数?
问题描述
我正在使用 react-select 中的 CreateableSelect 组件。现在用户可以选择任意数量的项目,但我希望用户选择不超过 5 个项目。如何限制可以选择的最大选项数?
<CreatableSelect
classes={classes}
styles={selectStyles}
textFieldProps={{
label: "Tags"
}}
options={suggestions}
components={components}
value={this.state.multi}
onChange={this.handleChange("multi")}
placeholder=""
isMulti
/>
解决方案
我建议您使用自定义组件的组合,Menu
并isValidNewOption
喜欢以下代码:
// For this example the limite will be 5
const Menu = props => {
const optionSelectedLength = props.getValue().length || 0;
return (
<components.Menu {...props}>
{optionSelectedLength < 5 ? (
props.children
) : (
<div>Max limit achieved</div>
)}
</components.Menu>
);
};
function App() {
const isValidNewOption = (inputValue, selectValue) =>
inputValue.length > 0 && selectValue.length < 5;
return (
<div className="App">
<Creatable
components={{ Menu }}
isMulti
isValidNewOption={isValidNewOption}
options={options}
/>
</div>
);
}
这里有一个活生生的例子。
这个想法是防止用户在限制 X(示例中为 5)之后访问选项,并防止通过propenter
创建时的键盘事件。isValidNewOption
推荐阅读
- list - 从 Scheme 的列表中交换数字和他们的名字
- javascript - Fancytree:在 DOM 中可见的新子项(通过 LacyLoad 加载)之后的事件
- node.js - 如何在 node.js 应用程序中使用 fastify-ws 向所有连接的套接字发送 http 响应?
- html - Vuejs - 根据当前选项卡动态更改数据表的项目
- android - 在 Wear OS 上禁用“覆盖屏幕进入睡眠模式”手势
- javascript - 如何在 jQuery $.ajax 请求中获取请求 url
- java - 如何使用 JSqlParser 添加新条件?
- c++ - 我想详细了解 C++ 中表达式和语句之间的区别。请选择具体的例子来解释
- rest - 从 Google App Script 调用 REST API Magento 2 出现问题 - ROBOTS Exception
- android - [Android.Emulator].无法将文件推送到 Android Q 和 R 上的 /system 文件夹