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

整体成果


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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据