起源
框架是antdesign以后版本为3.2，兼容到4.8；
react版本为16.13；
能够去掉Ts局部代码
业务上需要，验证表单须要有全选的下拉框。
于是通过函数组件先写了一个demo
demo包含表单验证，全选，反向全选性能，获取表单提交数据
import React, { useState } from "react";import { Select, Button, Divider, Modal, Form, Checkbox, message } from "antd";const { Option } = Select;interface optionT { key: string; label: string;}const SelectAll = (props) => { const [formVisible, setFormVisible] = useState(false); const { form } = props; const { getFieldDecorator, setFieldsValue, validateFields } = form; const children: optionT[] = []; for (let i = 10; i < 36; i++) { const value = { key: i.toString(36) + i, label: i.toString(36) + i, }; children.push(value); } const handleOk = () => { validateFields((err, value) => { if (err) { return; } else { /* selectAll能够定为最初提交数据的那个字段需做解决取得其value */ // console.log("这里是表单所有数据", value); setFormVisible(false); message.info(`这里是表单所有数据：${JSON.stringify(value)}`, 3); } }); }; return ( <> <Divider style={{ marginBottom: "10px" }}></Divider> <Button onClick={() => setFormVisible(true)}> 表单弹出</Button> <Modal visible={formVisible} title={"全选"} onCancel={() => setFormVisible(false)} onOk={() => handleOk()} > <Form.Item label="selectAll" key={"selectAll"}> {getFieldDecorator("selectAll", { rules: [{ required: true, message: "Choose what you like" }], })( <Select mode="multiple" labelInValue={true} placeholder="Please select" style={{ width: "80%" }} dropdownRender={(menu) => { return ( <div> <div style={{ padding: "4px 8px 8px 8px", cursor: "pointer" }} onMouseDown={(e) => e.preventDefault()} > <Checkbox onChange={(e) => { if (e.target.checked === true) { /* outValues为本人申请所得数据，留神，key为字符串否则不会回填和打钩 容易造成key值反复，所以表单取得的数据的key也为字符串 */ // const realValues = outValues.map((item) => { // return { // key: `${item.id}`, // label: item.value, // }; // }); setFieldsValue({ selectAll: children, }); } else { setFieldsValue({ selectAll: [], }); } }} > 全选 </Checkbox> </div> <Divider style={{ margin: "2px 0" }} /> {menu} </div> ); }} > {children.map((item) => { return <Option key={item.key}>{item.label}</Option>; })} </Select> )} </Form.Item> </Modal> </> );};export default Form.create()(SelectAll);整体成果