多 select 与 Select ANTD React 中的所有选项

Question

我有一个表单，其中有多个 select 下拉列表 antd 组件。在更改 select 所有选项时，我需要 select 所有可用选项最多 5 个标签。

请在此处的 codesandbox 中找到我的代码的 link https://codesandbox.io/s/summer-wind-1swto

最大标签 5 已使用 handleSelectAll 函数指定 select 选项

<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>

预计：

On select all is clicked all the options to be selected
On unchecking it all options to be removed

Answer 1

在您的情况下，setFieldsValue 不起作用。但是你可以使用 getValueFromEvent.

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>

这行得通。 handleSelectAll 事件 returns 使用 getValueFromEvent 分配的值并初始化了 select 组件。

Answer 2

在 4.x 版本上。我认为你应该在 form.setFieldsValue({nameOfFormItem: valueSelected}}

上设置值

多 select 与 Select ANTD React 中的所有选项

Multi-select with Select all Option in ANTD React

multi-select

reactjs

antd