antd form 监听某个字段的校验

Ant Design（antd）是一个基于React的UI组件库，它提供了丰富的组件和功能。在使用antd的Form组件进行表单开发时，常常需要对表单字段进行校验。监听某个字段的校验状态，可以通过Form组件提供的`onFieldsChange`属性来实现。

首先，你需要在Form组件中设置`onFieldsChange`属性，并为其提供一个回调函数。这个回调函数会在表单字段的值发生变化时被调用，并且会传递一个参数，该参数包含了一个`fields`数组，数组中的每一项都描述了一个字段的当前状态。

以下是一个简单的示例代码，展示了如何监听表单字段的校验：

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

const Demo = () => {
  const [form] = Form.useForm();
  const [fieldStatus, setFieldStatus] = useState({});

  const handleFieldChange = (changedFields, allFields) => {
    // changedFields 是变化的字段， allFields 是全部字段
    setFieldStatus(allFields);
  };

  return (
    <Form
      form={form}
      onFinish={() => console.log('Submit!')}
      onFieldsChange={handleFieldChange} // 监听字段变化
    >
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

在这个示例中，`handleFieldChange` 函数会在任何字段发生变化时被调用，并更新`fieldStatus`状态，你可以根据`fieldStatus`中的字段状态来进行相应的逻辑处理，比如显示校验信息等。