我正在尝试将全选/取消全选添加到React Antd的"SELECT"组件。
我的代码
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组件在视觉上不会自我更新，这意味着它停留在我选择/取消选择的内容上。
很奇怪的行为。
4条答案
按热度按时间s4n0splo1#
这个问题与使用Antd的Form & Form.item和Select有关。没有Form代码也能正常工作
nfs0ujit2#
Alex answer是正确的。对于需要Form.item作为Select的父项的任何人-使用custom form components是可能的。只需创建呈现和选择的自定义组件。然后将您的组件作为唯一的子项粘贴到Form.item（没有任何嵌套元素或 Package ）
你的自定义组件会自动接收value和onChange作为属性。你也可以把你自己的属性传递给你的自定义组件。例如字段name或data-一个选项数组。
nkhmeac63#
因为
models变量没有变化，所以可以应用以下两个更改：一个
两个
n8ghc7c14#
选择*值属性 * 在Form.Item父组件上 * 未定义名称属性 * 时有效。