React：觸發父表單的onSubmit

Question

在我的父組件中，我正在創建一個 ref 並將其傳遞給子組件 -

<ChildComponent ref={submitRef}/>

在我的 ChildComponent 中，我有一個表單，當我單擊父組件中的一個按鈕時，它的 onSubmit 應該被觸發。

<form onSumit={handleOnSubmit}>
    <Button type="submit" ref={submitRef}/>
</form>

這段代碼似乎有問題，因為它不起作用。 我在這里做錯了什么？

Answer 1

我經歷了類似的錯誤或異常情況。 在子組件中使用 ref 時，我們必須轉發 ref 以跟蹤更改。 您可以查看 React 文檔中的前向參考。

• 父容器

父容器需要是這樣的：

import React from "react";
import { useRef } from "react";
import ChildComponent from "./ChildComponent";

const ParentContainer = () => {
  const submitRef = useRef();

  return <ChildComponent ref={submitRef} />;
};

export default ParentContainer;

• 子組件

在子組件內部，我們必須接受 ref。 我們還需要在 ForwardRef 的幫助下創建一個前向組件。 它將通過新組件。 現在，我們必須導出這個新組件。 代碼是這樣的

import React from "react";

const ChildComponent = (props, ref) => {
  const handleOnSubmit = (e) => {
    e.preventDefault();
  };
  return (
    <form onSubmit={handleOnSubmit}>
      <button type="submit" ref={ref}>
        Submit
      </button>
    </form>
  );
};

const ForwordComponent = React.forwardRef(ChildComponent);

export default ForwordComponent;