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 。没有 Form

的代码可以正常工作

Answer 2

因为models变量未更改。您可以应用以下两项更改：

一个

const models = ['A4', 'A6', 'A8', 'A1', 'Q3', 'Q5'];
const [selected, setSelected] = useState({
  // Initial state
  models,
});

两个

// Get models from `selected`
{map(selected.models, model => <Option value={model} key={model}>{model}</Option>)}

Answer 3

Alex answer 是正确的。对于需要 Form.item 作为 Select 的父级的任何人 - 可以使用 custom form components。只需创建渲染 antd Select 的自定义组件即可。并将您的组件作为唯一的子组件粘贴到 Form.item（没有任何嵌套元素或包装器）

<Form.Item>
    <MySelect />
</Form.Item>

您的自定义组件将自动接收 value 和 onChange 作为道具。您还可以将您自己的其他道具传递给您的自定义组件。例如字段 name 或 data - 一组用于选择的选项。

反应|蚂蚁设计选择值未设置

3 个答案: