antd自定义form表单控件

最新推荐文章于 2024-11-16 21:06:36 发布

原创最新推荐文章于 2024-11-16 21:06:36 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 同时被 2 个专栏收录

8 篇文章

订阅专栏

react

4 篇文章

订阅专栏

本文介绍如何使用Ant Design的CheckboxGroup创建自定义表单组件，实现全选、反选功能，并通过onCheckChange和onCheckAllChange事件处理选项变化，确保组件状态与表单值同步。

用 getFieldDecorator 方法包裹的表单控件会自动添加 value (或由 valuePropName 指定的属性名) 和 onChange （或由 trigger 指定的属性名）属性， value 接收 form 传入的值， onChange 将控件的值回调到 form 中。这两个属性是自动添加的，所以自定义控件不能有这两个属性。
借鉴：https://www.jianshu.com/p/2091e7a2c36a

import React, { PureComponent } from "react";
import { Checkbox  } from "antd";
import styles from './index.module.less'

const CheckboxGroup = Checkbox.Group;
class CheckBox extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            checkedList: props.value || [],
            indeterminate: true,
            checkAll: false,
        }
    }
    // 改变选中
    onCheckChange = checkedList => {
        const { onChange, options } = this.props
        this.setState({
          checkedList,
          indeterminate: !!checkedList.length && checkedList.length < options.length,
          checkAll: checkedList.length === options.length,
        })
        onChange && onChange(checkedList)
      };
    // 选中全部
    onCheckAllChange = e => {
        const {options, onChange} = this.props
        this.setState({
          checkedList: e.target.checked ? options : [],
          indeterminate: false,
          checkAll: e.target.checked,
        })
        onChange && onChange(e.target.checked ? options : [])
    }
    render() {
        const {
            showAll,
            options
        } = this.props
        return (
            <div className={styles.checkBoxWrap}>
                {
                    showAll && 
                        <Checkbox
                            indeterminate={this.state.indeterminate}
                            onChange={this.onCheckAllChange}
                            checked={this.state.checkAll}
                        >
                            全部
                        </Checkbox>
                }
                
                <CheckboxGroup
                    options={options || []}
                    onChange={this.onCheckChange}
                    value={this.state.checkedList}
                />
            </div>
            
        )
    }
}
export default CheckBox;