记录一个antdesign select 全选组件demo

起源

框架是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 (
    <>
      
       setFormVisible(true)}> 表单弹出
       setFormVisible(false)}
        onOk={() => handleOk()}
      >
        
          {getFieldDecorator("selectAll", {
            rules: [{ required: true, message: "Choose what you like" }],
          })(
             {
                return (
                  

                    
 e.preventDefault()}
                    >
                       {
                          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: [],
                            });
                          }
                        }}
                      >
                        全选
                      
                    
                    
                    {menu}
                  
                );
              }}
            >
              {children.map((item) => {
                return {item.label};
              })}
            
          )}
        
      
    
  );
};

export default Form.create()(SelectAll);

整体效果

---

如果对你有帮助，麻烦给个赞呗。