React+antd3中，在获取实时变化的表单值的基础上，使用this指向修改state变量

antd3中实时获取变化的表单值

由于项目中使用的antd版本是3.x，若要实时获取变化的表单值，可以使用onValuesChange配置项，如下所示：

import React, { Component } from 'react'
import { Modal, Form, Checkbox } from 'antd';

@Form.create({
    onValuesChange(props, changedValues, allValues) {
        // throttle为自定义节流函数
        throttle(index.formValuesChange(props, changedValues, allValues), 100);
    },
});
export default class index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
        };
    }
    
    componentDidUpdate(prevProps) {
        // 处理data
    }

    /**
     * 表单值实时更新
     * @param {Object} props
     * @param {Object} changedValues 当前改变的表单项
     * @param {Object} allValues 全量表单项
     */
    static formValuesChange = (props, changedValues, allValues) => {
        const { form } = props;
        /**
         * 1、此处可以实时获取当前改变的表单值以及当前全量表单值。
         * 2、使用form内的属性及函数可以改变所需的表单值。
         * 3、无法使用this指向，无法修订data。
         */
    };

    render() {
        const { form } = this.props;
        const { data } = this.state;

        // 弹窗内表单，仅列出关键代码
        return <Modal>
          <Form>
            {
                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>
    }
}

局限性：无法在formValuesChange中使用this指向，即也无法根据条件改变data。（antd4无此局限，具体用法可参考官网：https://ant.design/components/form）

使用antd3，在能够实时获取表单变化的前提下，使用this指向

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>
            <Form>
                {
                    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>
    }
}

有更好的解决方案，可以给我留言，让我学习一下~