我正在使用反应选择中的 CreatableSelect 组件。现在用户可以选择任意数量的项目,但我希望用户选择的项目不超过 5 个。如何限制可以选择的最大选项数?
<CreatableSelect
classes={classes}
styles={selectStyles}
textFieldProps={{
label: "Tags"
}}
options={suggestions}
components={components}
value={this.state.multi}
onChange={this.handleChange("multi")}
placeholder=""
isMulti
/>
我建议您使用自定义组件的组合Menu
and 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>
);
}
Here a 活生生的例子 https://codesandbox.io/s/q4npoqp90w.
这个想法是为了防止用户访问限制 X(示例中为 5)之后的选项,并防止enter
创建时的键盘事件isValidNewOption
prop.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)