formのonSubmitを別のハンドラから操作したい

Question

フォームのonSubmit属性を訳あって別のボタンのイベントからも操作したいのですが可能でしょうか？

やりたいこと

import * as React from "react";
import { render } from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

type FormData = {
  firstName: string;
  lastName: string;
};

export default function App() {
  const { register, handleSubmit, errors } = useForm<FormData>();
  const onSubmit = handleSubmit(({ firstName, lastName }) => {
    console.log(firstName, lastName);
  });

  return (
  <>
    <form onSubmit={onSubmit}>
      <label>First Name</label>
      <input name="firstName" ref={register({reqired: true})} />
      <label>Last Name</label>
      <input name="lastName" ref={register} />
      <input type="submit"/> // このボタンは当然onSubmitを待ち受ける
    </form>
    //<button onClick={このボタンをクリックしたらonSubmitが実行されたことと同義にしたい}>
    //  送信
    //</button>
  </>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

理由としては、registerのバリデーションを別のボタンでも検出したいからなんですよね。(handleSubmitがonSubmitを経由してるのでonSubmitを外部から検知したい)

Answer 1

<buttun type="submit">

にすると送信ボタンが作れるようです（ニッチすぎる）。
HTMLFormElement: submit イベント - Web API | MDN

Comments

[yochun02]

buttonタグがformの外にある場合、formのidに紐づいている必要があるみたいですね。
```
<form id={フォーム識別ID}>
...
</form>

<button type="submint" form={フォーム識別ID}>
```
とすることでフォームのイベントを受け付けることができました。

[yochun02]

また、別のハンドラで<button>を作動させるには
```
const onSubmit = ...

anotherFunc = () => {
const form = document.getElementById({フォーム識別ID})
form.addEventListener("submit", ()=>({}))
}

<form onSubmit={handleSubmit(onSubmit)}>
...
...
```
と書くことで、anotherFuncが呼ばれたときにonSubmitをhandleSubmit経由で実行(<button>が押されたことと同義)することができました。