import React, { Component } from 'react'
import { Modal, Checkbox, Form } from 'antd';
@Form.create()
export default class index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],  // 弹窗数据
            formValues: {}, // 存储最新的全量表单值
    componentDidUpdate() {
        const { form } = this.props;
        const { formValues } = this.state;
        // 比较上次的表单值与当前的表单值是否相等，isEqualObject为自定义的比较函数
        if (!isEqualObject(formValues, form?.getFieldsValue())) {
            this.formValuesChange(formValues, form?.getFieldsValue());
            // 修改最新的全量表单值
            this.setState({ formValues: form?.getFieldsValue() });
     * 表单值变化实时更新
     * @param {Object} preValues 上次的表单值
     * @param {Object} currentValues 当前的表单值
    formValuesChange = (preValues, currentValues) => {
         * 比较上次的表单值与当前的表单值，来判断修改了哪个字段。
         * 此时可以使用this指向，可以修改data。
         * 若preValues为空，表示打开弹窗的操作；若currentValues为空，表示关闭弹窗的操作
        this.setState({ data: [] });
     * 关闭弹窗，销毁数据
    cancel = () => {
        const { onCancel } = this.props;
        onCancel && onCancel();
        this.setState({
            data: [],
            formValues: {},
        });
    render() {
        const { form } = this.props;
        const { data } = this.state;
        // 弹窗内表单，仅列出关键代码
        return <Modal>
                    data?.map(v => (
                        <Form.Item key={v.key}>
                                form.getFieldDecorator(v.key, { initialValue: undefined })
                                    (<Checkbox.Group options={v.list} disabled={v.disabled} />)
                        </Form.Item>
            </Form>
        </Modal>
有更好的解决方案，可以给我留言，让我学习一下~
                                    在antd中 有时候  还是会碰见这样得问题得，但是antd已经帮我们封装好了,
通过form表单来控制  各个表单元素 ，当我们想要监控某一个表单的变化的时候 发现不好搞了
最近有个小需求  就是 监听表单中 单选框值得变化 来触发一些 效果，这样的话就要求你要知道
每次值发现改变的回调了
在 配置的时候 有一个api方法 可以用来 监控变化 以及变化后的值
onValuesChange	字段值更新时触发回调事件	function(changedValues, allValues)
onFieldsCha
                                    antd Form组件的onValuesChange回调，在通过form.setFieldValue / form.setFieldsValue api修改时，不会触发。
                                    在添加的表单中，默认值一般都为空，或者是真假状态的，所以说为Form的 initialValues 属性内的表单项的字段名称对应的值设为空的字符串，或者false默认的radio单选初始值即可。在打开编辑时显示的自然是当前编辑的这项的所有状态，接着还是在 onValuesChange 中使用一个状态拿到最新的更改后的数据提交编辑即可。编辑时的初始值为当前编辑项，所以直接可直接将当前编辑项的整个对象数据放入initialValues属性中当做值即可。allValues为整个最新的状态的表单对象。
                                    首先理解正确解法，如果在 Form 组件中要想改变他其中 Form.Item 中的值就需要给 Form 绑定一个 form 属性， 用。还是需要读懂框架给的接口文档。今天我总是想在 Form 表单中绑定值（历时 4h 的修改，最后通过yupi哥的代码得到提示最终解决），并且能够动态修改。进行定义，需要父组件传过来的值而且需要动态更新的话就需要随时的监听这个值的变化，所以需要用到生命周期函数，用。时，如果想要控制里面的表单值就需要给ProTable 也设置一个 formRef 属性，然后定义。
                                    const{getFieldDecorator}=this.props.form;const formItemLayout={labelCol:{xs:{span:24},sm:{span:6},},wrapperCol:{xs:{span:24},sm:{span:14},},};constEditLargeSize=Form.create({当Form.Item子节点的值发生改变时触发，可以把...
                                    import React,{ useState, useEffect } from 'react';
import { Button, Form, Input } from 'antd';
// 防抖
function debounce(fn: Function, delay = 500) {
  let timeoutId: any;
  return function (this: any) {
    clearTimeout(timeoutId);
    timeoutId = setTimeo
​		 在开发项目中，经常使用表单模块，来完成交互的过程。但是我感觉，在以前开发的过程中，就是直接copy，没有仔细的去理解其中的逻辑，只要现象满足就可以。但是最近项目中想封装一个通用的表单组件，还是必要知道其中的逻辑和各个属性。所以，就回头过来仔细的理一下。
在antd4中，使用form表单，有着三种不同的方式的写法。
普通用法  （所以的布局全在表单中）
hooks写法   .