react hooks父组件使用子组件的值

一只野生的酸酸

于 2023-05-10 10:13:36 发布

阅读量288

点赞数

文章标签： react.js 前端 js

本文链接：https://blog.youkuaiyun.com/weixin_45455227/article/details/130594821

版权

该文章展示了一个React应用中，父组件如何通过ref与子组件交互来获取表单的值。子组件使用`useImperativeHandle`暴露方法，父组件在Modal的确认按钮点击事件中调用此方法获取并打印表单字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

import React, { useRef } from "react";
import { Modal } from "antd";
import FormSearch from "./FormSearch";

const Parent = () => {
  const getFormValue = useRef();

  const handleOk = () => {
    const fields = getFormValue.current.formFields;
    console.log(fields);
  };

  return (
    <Modal onOk={handleOk}>
      <FormSearch ref={getFormValue} />
    </Modal>
  );
};

export default Parent;

子组件

import React, { useImperativeHandle, forwardRef } from "react";
import { Form } from "antd";

const FormSearch = (props, ref) => {
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    formFields: form.getFieldsValue(),
  }));

  return (
    <Form form={form}>
      ...
    </Form>
  );
};

export default forwardRef(FormSearch);