reactで対象のformをボタンではなくjsでsubmitしたい

Question

実現したいこと

対応したいことはreact環境でformをbuttonのデフォルトのsubmitではなく、jsでsubmitさせたいです

発生している問題・分からないこと

idやrefを使用してsubmitさせようとしましたが、どうもうまく動作せず、、
知見がある方にご教授いただきたいです

該当のソースコード

```ts
import { useRef } from "react";
import "./styles.css";

export default function App() {
  const formRef = useRef<HTMLFormElement>(null);
  return (
    <div className="App">
      <form
        id="test"
        ref={formRef}
        onSubmit={() => {
          console.log("test");
        }}
      >
        ...etc
      </form>
      <button
        onClick={() =>
　　　//パターン１
          (document.getElementById("test") as HTMLFormElement)?.submit()
          //パターン２
          //formRef.current?.submit()
        }
      >
        submit2
      </button>
    </div>
  );
}

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
docmentを見つつ自分なりに試した

### 補足
特になし

Comments

[maisumakun]

> react環境でformをbuttonのデフォルトのsubmitではなく、jsでsubmitさせたいです

どのような目的でそれを行いたいのですか？

[FKM]

機能を分岐したい目的なのならuseReducerフックでいけますね。

Answer 1

やりたいことは察しかねますが、「ボタンAを押したときとボタンBを押したときで処理を分岐したい」だけであれば、

• onSubmit のイベントハンドラ内で submitter プロパティを使う
• <button name="" value="" /> を使う

という選択肢がありそうです。

https://developer.mozilla.org/ja/docs/Web/API/SubmitEvent/submitter