Ant Design 是一套基于 React 的 UI 组件库，可以用于构建漂亮且用户友好的 Web 应用程序。在 Ant Design 中，Form 表单组件提供了 OnAfterchange 和 OnValuesChange 两个处理程序来处理表单数据变化的事件。

下面是一个包含代码示例的解决方法：

1. 首先，确保已经安装了 Ant Design 和 React：

npm install antd react

2. 创建一个名为 FormExample.js 的文件，并导入必要的组件和样式：

import React from 'react';
import { Form, Input, Button } from 'antd';
import 'antd/dist/antd.css';

const FormExample = () => {
  // 表单数据变化事件处理程序
  const handleValuesChange = (changedValues, allValues) => {
    console.log('所有的表单值：', allValues);
    console.log('变化的表单值：', changedValues);
  };

  // 提交表单事件处理程序
  const handleSubmit = (values) => {
    console.log('提交的表单值：', values);
  };

  return (
    

      
        
      
      
        
      
      
        提交
      
    
  );
};

export default FormExample;

3. 在主应用程序文件中使用 FormExample 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import FormExample from './FormExample';

ReactDOM.render(, document.getElementById('root'));

以上代码示例中，我们创建了一个包含一个姓名输入框和一个邮箱输入框的表单。在表单组件中，我们使用了 onValuesChange 属性来指定表单数据变化事件的处理程序，并使用 onFinish 属性来指定提交表单事件的处理程序。

当表单中的输入值发生变化时，handleValuesChange 函数会被调用，它接收两个参数：changedValues 表示变化的表单值，allValues 表示所有的表单值。我们可以在这个函数中处理表单值的变化。

当表单提交时，handleSubmit 函数会被调用，它接收一个参数 values，表示提交的表单值。我们可以在这个函数中处理表单的提交逻辑。

通过以上的解决方法，你可以在 Ant Design 的表单组件中使用 onValuesChange 和 onFinish 属性来处理表单数据变化和提交的事件。