react Ant Design form 的用法，代码举例

Ant Design的Form组件可以帮助我们快速创建表单，并且支持表单验证、数据提交等功能。下面是一个简单的Ant Design表单组件的代码示例：

import { Form, Input, Button } from 'antd';

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <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 {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

在这个例子中，我们使用了Ant Design的Form、Input和Button组件来创建一个简单的表单。通过设置Form组件的name、onFinish和onFinishFailed属性，我们可以指定表单的名称、数据提交成功和失败时的回调函数。通过在Form.Item中设置rules属性，我们可以为表单字段设置验证规则。最后，在Form.Item中包裹的Input和Button组件则是表单中的输入框和提交按钮。