Reactでinputタグの外でsubmitを行う

formの外でsubmitをしたい時ってありませんか？

例えばユーザーにECサイトのフォームに氏名や年齢、電話番号、クレジットカード番号を入力してもらい、 購入ボタンを押した時にモーダルで最後の確認を行う機能を実装するとします

(画像は拾い物)

モーダルのボタンからformのsubmitをするにはどうしたらいいでしょうか？

querySelectorを使う

gold standardかはわかりませんがquerySelectorを使って愚直に要素を取ってきてsubmitする方法で出来ました

具体的な使い方としてはこんな感じ

<form
    className="registerForm"
    ...
>
    <input
        name="name"
    />
    <input
        name="address"
    />
    <input
        name="phone-number"
    />
</form>

<Modal
    onClick={() => {
        document.querySelector(".registerForm").submit;
    }}
/>

Reactのrefsを使う方法もあるようなので土日に勉強したいと思います