关于前端:记录一个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 (
    <>
      <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);

整体成果

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