我正在尝试将“全选”/“取消全选”添加到 React Antd 的“SELECT”组件中。
My code
const models = ['A4', 'A6', 'A8', 'A1', 'Q3', 'Q5'];
const [selected, setSelected] = useState({
models: [],
});
console.log('selected', selected);
const handleModelSelect = (option) => {
if (option === 'all') {
if (selected.models.length === models.length) {
setSelected((prev) => ({ ...prev, models: [] }));
} else {
setSelected((prev) => ({ ...prev, models }));
}
} else {
setSelected((prev) => ({ ...prev, models: uniq([...prev.models, option]) }));
}
};
return
(<Form>
<Form.Item
name="model"
style={{ display: 'inline-block', width: 'calc(33% - 8px)' }}
>
<Select mode="multiple" placeholder="Models" value={selected.models} onSelect={handleModelSelect}>
<Option value="all">Select all</Option>
{map(models, model => <Option value={model} key={model}>{model}</Option>)}
</Select>
</Form.Item>
</Form>)
我看到我确实在“selected.models”中选择了和未选择的所有内容,但问题是 Select 组件在视觉上不会更新自身,这意味着它与我选择/未选择的内容保持一致。
真是奇怪的行为。
问题是使用 Antd 的表格和表格项目随着Select。
代码工作得很好,没有Form
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)