react,js和antd4.x表单的t提交

在React.js和Ant Design 4.x中，表单的提交可以通过使用Form组件的onFinish属性来实现。当表单中的所有表单项都通过验证时，onFinish事件会被触发，并且会将表单的值作为参数传递给事件处理函数。下面是一个简单的例子，展示了如何在React.js和Ant Design 4.x中提交表单。

首先，在你的代码中导入所需的模块：

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';

接下来，创建一个表单组件：

const MyForm = () => {
  // 定义表单项的值
  const [form] = Form.useForm();

  // 表单提交事件
  const handleSubmit = (values) => {
    console.log('Received values of form: ', values);
    // 在这里可以提交表单数据到服务器
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

在这个例子中，我们使用了Ant Design的Form、Input和Button组件来创建表单。在表单中，我们定义了一个onFinish事件处理函数handleSubmit，当表单中的所有表单项都通过验证时，该事件会被触发。在事件处理函数中，我们可以获取到表单的值，并将其提交到服务器。

最后，我们将表单组件渲染到页面中：

ReactDOM.render(<MyForm />, document.getElementById('root'));

这是一个简单的例子，你可以根据自己的需求来添加更多的表单项和验证规则。希望对你有帮助！