反应 | Ant design select值未设置

Question

我正在尝试将“全选”/“取消全选”添加到 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 组件在视觉上不会更新自身，这意味着它与我选择/未选择的内容保持一致。

真是奇怪的行为。

Answer 1

问题在于使用 Antd 的Form & Form.item以及Select。代码在没有表单的情况下工作得很好