Ant Design 中如何在外侧点击时触发表单验证？

前端

2023-10-27 23:55:04

场景介绍
在使用 Ant Design 构建表单时，有时我们会遇到这样的场景：表单很大，按钮和表单不在同一个组件中，或者由于其他原因，我们需要在表单外侧点击时触发表单验证。

2. 问题分析

在这种情况下，我们需要在子组件（表单组件）和父组件（按钮组件）之间建立通信，以便在按钮点击时通知表单进行验证。

3. 解决方案

3.1 子传父通信

为了实现子传父通信，我们需要在子组件中定义一个回调函数，然后将这个回调函数作为 props 传递给父组件。在父组件中，我们使用 ref 获取子组件的实例，然后在按钮点击时调用子组件的回调函数，从而触发表单验证。

3.2 ref 的使用

ref 是 React 中的一个内置属性，它允许我们访问 DOM 元素或组件实例。在子组件中，我们可以使用 ref 将子组件的实例传递给父组件。在父组件中，我们可以使用 ref 来获取子组件的实例，然后调用子组件的方法或属性。

4. 示例代码

4.1 子组件（表单组件）

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

const FormComponent = (props) => {
  const formRef = useRef();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const triggerValidation = () => {
    formRef.current.validateFields();
  };

  return (
    <Form
      ref={formRef}
      onFinish={onFinish}
    >
      <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>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
      <Button type="default" onClick={triggerValidation}>
        Trigger Validation
      </Button>
    </Form>
  );
};

export default FormComponent;

4.2 父组件（按钮组件）

import React, { useRef } from 'react';
import FormComponent from './FormComponent';

const ButtonComponent = () => {
  const formRef = useRef();

  const triggerValidation = () => {
    formRef.current.triggerValidation();
  };

  return (
    <div>
      <FormComponent ref={formRef} />
      <Button type="primary" onClick={triggerValidation}>
        Trigger Validation
      </Button>
    </div>
  );
};

export default ButtonComponent;