Reactjs ANTD React中的多选和全选选项

我有一个表单，其中有一个多选下拉列表antd组件。 更改“全选”选项时，我需要选择最多5个标记的所有可用选项

请在这里的codesandbox中找到我的代码链接

最大标记为5，用handleSelectAll分隔，在选择选项时调用该函数

<Form.Item label= 'Column Names'>
                  {getFieldDecorator(`columnNames`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [
                      {
                        required: true,
                        message: "Please input the Column Names!",
                      },
                    ],
                  })(
                    <Select
                        mode="multiple"
                        placeholder="Please select Columns"
                        maxTagCount={5}
                        onChange={this.handleSelectAll}
                        >
                          <Option key="all" value="all">---SELECT ALL---</Option>
                        {children}
                        </Select>
                  )}
</Form.Item>

---

在您的情况下，

setFieldsValue

不起作用。但是您可以使用

getValueFromEvent

handleSelectAll = (value) => {
    if (value && value.length && value.includes("all")) {
        if (value.length === all.length + 1) {
            return [];
        }
        return [...all];
    }
    return value;    
}

{getFieldDecorator（`columnNames`）{
ValidateTracger:['onChange'，'onBlur']，
getValueFromEvent:this.handleSelectAll，
规则：[
{
要求：正确，
消息：“请输入列名！”，
},
],
})(
---全选---
{儿童}
)}

---

这会奏效的

handleSelectAll

event返回使用

getValueFromEvent

指定的值，并初始化选择组件。

什么是

getFieldDecorator

以及如何使用它？我的意思是，从Antd 4开始。codesandbox链接已断开=(

handleSelectAll = (value) => {
    if (value && value.length && value.includes("all")) {
        if (value.length === all.length + 1) {
            return [];
        }
        return [...all];
    }
    return value;    
}

<Form.Item label='Column Names'>
    {getFieldDecorator(`columnNames`, {
        validateTrigger: ['onChange', 'onBlur'],
        getValueFromEvent: this.handleSelectAll,
        rules: [
            {
                required: true,
                message: "Please input the Column Names!",
            },
        ],
    })(
        <Select
            mode="multiple"
            placeholder="Please select Columns"
            maxTagCount={5}
            onChange={this.handleSelectAll}
        >
            <Option key="all" value="all">---SELECT ALL---</Option>
            {children}
        </Select>
    )}
</Form.Item>