reactjs antd 实现双向数据绑定的form表单

在 React 和 Ant Design 中实现双向数据绑定的表单，可以使用受控组件的方式，即通过 state 来控制表单的值。在 Ant Design 中，可以使用 Form 组件来实现表单的布局、校验等功能。

以下是一个简单的实现示例：

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

const DemoForm = () => {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState({ name: '', age: '' });

  // 表单值改变回调
  const onFormChange = (changedValues, allValues) => {
    setFormData(allValues);
  };

  // 提交表单回调
  const onSubmit = () => {
    console.log(formData);
  };

  return (
    <Form
      form={form}
      onValuesChange={onFormChange}
      initialValues={formData}
    >
      <Form.Item
        label="姓名"
        name="name"
        rules={[{ required: true, message: '请输入姓名' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="年龄"
        name="age"
        rules={[{ required: true, message: '请输入年龄' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={onSubmit}>提交</Button>
      </Form.Item>
    </Form>
  );
};

export default DemoForm;

上面的示例中，通过 useState 来定义 formData 状态，用于存储表单的数据。同时，使用 Form 组件来渲染表单，通过 onValuesChange 回调来实时更新 formData 数据。在提交表单时，可以通过 formData 取到表单的数据进行处理。注意，需要使用 Form.useForm() 来获取 form 对象并传递给 Form 组件。