Form表单配合Checkbox全选组件封装

FØund404

已于 2023-02-06 10:13:03 修改

阅读量1k

点赞数

分类专栏： React 文章标签： javascript 前端 react.js

于 2023-02-03 18:11:30 首次发布

本文链接：https://blog.csdn.net/bl_ack233/article/details/128874076

版权

React 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该文章展示了如何在React应用中结合AntDesign库，创建一个表单，其中包括Checkbox组件，实现全选和单选的功能。代码示例详细说明了CheckboxGroup的用法，以及如何处理选中状态的变化和表单的提交操作。

摘要由CSDN通过智能技术生成

Form 表单配合 Checkbox 全选组件封装

Form 表单中存在Checkbox多选框,支持全选,以及单选监听等功能

在这里插入图片描述


import { Checkbox, Button, Form, Input } from "antd";
import React, { useEffect, useState } from "react";
const CheckboxGroup = Checkbox.Group;

// 子checkbox可选选项
const plainOptions = ["Apple", "Pear", "Orange"];
// 默认子checkbox已选选项
const defaultCheckedList = ["Pear", "Orange"];

const CheckboxForm = () => {
  const [form] = Form.useForm();
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);

  // 子checkbox Change改变
  const onChange = (list) => {
    form.setFieldValue("checks", list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    form.setFieldValue(
      "checkAll",
      !!list.length && list.length < plainOptions.length
    );
    form.setFieldValue("checkAll", list.length === plainOptions.length);
  };
  
  // 全选Checkbox Change改变
  const onCheckAllChange = (e) => {
    form.setFieldValue("checks", e.target.checked ? plainOptions : []);
    setIndeterminate(
      !!form.getFieldValue("checks").length &&
        form.getFieldValue("checks").length < plainOptions.length
    );
    form.setFieldValue("checkAll", e.target.checked);
  };

  // 判断默认选项是否不为空 改变全选checkbox为半选
  useEffect(() => {
    if (checkedList.length) {
      setIndeterminate(
        !!form.getFieldValue("checks").length &&
          form.getFieldValue("checks").length < plainOptions.length
      );
    }
  }, [checkedList.length, form]);

  // 提交
  const onFinish = (values) => {
    console.log("Success:", values);
  };

  return (
    <>
      <Form form={form} onFinish={onFinish}>
        <Form.Item name="input" label="user">
          <Input />
        </Form.Item>
        <Form.Item label="选择">
          <Form.Item
            name="checkAll"
            noStyle
            initialValue={checkAll}
            valuePropName="checked"
          >
            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange}>
              Check all
            </Checkbox>
          </Form.Item>
          <Form.Item name="checks" noStyle initialValue={checkedList}>
            <CheckboxGroup options={plainOptions} onChange={onChange} />
          </Form.Item>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};
export default CheckboxForm;