【react hook】父组件调用子组件方法

父组件的写法

import React, { useState, useRef } from "react";

let addRuleFormRef = useRef(null);

<AddRuleForm ref={addRuleFormRef} />

const submit = () => {
    let form = addRuleFormRef.current?.getForm();
    let formOpts = form.getFieldsValue();
    form.validateFields();
    // ...
};

子组件表单的写法

import { Button, Checkbox, Col, Form, Input, Row, Select } from "antd";
import type { FormInstance } from "antd/es/form"; // 注意引入这个
import React, { useImperativeHandle } from "react"; // 注意导入useImperativeHandle

const AddRuleForm = (props: any, ref: any) => { // 注意：第二个参数ref是必须要有的！！！
  const addFormRef = React.createRef<FormInstance>();  // 这边是定义子组件的表单ref变量，并不是直接使用useRef

  // onFinish由父组件调用
  useImperativeHandle(ref, () => ({
    getForm: () => {
      return addFormRef.current;
    },
  }));

  const selectStyle = { width: "95%" };

  return (
    <Form
      name="basic"
      ref={addFormRef} // 这边要定义
      initialValues={{ remember: true }}
      autoComplete="off"
    >
      <Row>
        <Col span={12}>
          <Form.Item
            label="规则名称"
            name="name"
            rules={[{ required: true, message: "请输入规则名称!" }]}
          >
            <Input style={selectStyle} placeholder="请输入规则名称" />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};

export default React.forwardRef(AddRuleForm);