Ant Design在处理业务表单中的一些实践

import React from 'react';
import { Form, Input, Button } from 'antd';
 
class BusinessForm extends React.Component {
  handleSubmit = (values) => {
    console.log("提交的数据:", values);
    // 这里可以调用API接口进行数据提交
  };
 
  render() {
    return (
      <Form onFinish={this.handleSubmit}>
        <Form.Item name="name" label="用户名">
          <Input />
        </Form.Item>
        <Form.Item name="age" label="年龄">
          <Input type="number" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    );
  }
}
 
export default BusinessForm;

这段代码展示了如何使用Ant Design的Form和Input组件来创建一个简单的用户信息表单，并处理提交事件。当用户填写表单并点击提交按钮时，表单的数据会通过onFinish回调函数传递给handleSubmit方法，在这里可以执行进一步的处理，比如发送到服务器。