Next.jsのreact-hook-formが動作しない...

Question

やりたいこと

こんにちは！Next.js+tsでtsxを書いています。関数コンポーネントを使ってフォーム内にIDを入力し、送信ボタンを押すと、ある外部のヘルパーが呼び出される実装を考えています。
このIDの入力が存在すれば、ヘルパーが起動する方針です。
(helper.jsはあるサービスにデータを渡すモーダルが出力される機能を提供しています)

具体的にやりたいことは次の２つです

1.onSubmit内でpublicIdのstateを触りたい
2.HelperにpublicIdを渡したい

実装方法

1.→onSubmitのタイミングでid = true にして、ヘルパーを立ち上げる
2.→このときに、idをHelperに渡す

やったこと

IDの有無に関わらず、「ヘルパーを出力する」を押すと、「IDが見つかりません」というエラーメッセージがhelper.jsのモーダルとして現れました。
1.→デベロッパーツールで確認すると、idが渡っていないことが確認できた
2.→Helperのstateも変更されていない様子

できていいないこと&所感

1→onsubmitで id = true になっていない
2 →Helperにidを渡せていない...getvalueとregisterを訂正する必要あり？

ソースコード

import { ReactElement, useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'

function Opener(): ReactElement {
  const { handleSubmit, getValues, register } = useForm()
  const [isOpen, setIsOpen] = useState(false)

  const onSubmit = (): void => {
    setIsOpen(true)
  }

  return (
    <div>
      {{ isOpen } && <Helperid={getValues()}></Helper>}
      <div className="relative top-10">
        <div className="text-center">
          <div className="relative mt-4 pt-2">
            {/* //このタイミングでpublicIdをuseStateしたい */}
            <form onSubmit={handleSubmit(onSubmit)}>
              <input className="pl-4 w-full focus:outline-blue bg-transparent h-14" />
              <input
                {...register}
                type="submit"
                value="ヘルパーを開く"
                className="opener"
              />
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}

function Helper(props: { id: string }): null {
  const { id } = props
  useEffect(() => {
    const existingScript = document.getElementById('hoge_ul')
    if (!existingScript) {
      const script = document.createElement('script')
      script.src = 'https://helper.test.hogehoge.io/v2/helper.js'
      script.id = 'helper_ul'
      document.body.appendChild(script)
      script.onload = () => {
        const data = new Data({
          id: { id },
          openerSelector: '.opener',
        })
    }
  }, [])
  return null
}

export default Helper

ここ1週間でNext.jsを触り始めたので、よくわかっていないことが多いです。。
Helper関数は問題がないと思ってますが、何か間違えている点をご指摘いただければ幸いです

Comments

[hoshi-takanori]

Next.js や react-hook-form はよく分かりませんが、React 的には getElementById を使うのは良くないですね。というか、この helper.js ってどういうものですか？

[ts21]

なるほど、それはどのような理由からでしょうか？
helper.jsはあるサービスにデータを渡すモーダルが出力される機能を提供しています

[hoshi-takanori]

React が仮装 DOM という技術を使ってるからです。
https://qiita.com/seira/items/6767e222890c9890ecb9

モーダルの出力というのが、createElement したものを appendChild する方法で実装されているなら、それが React の環境でうまく動くような調整が必要になると思います。

[ts21]

ありがとうございます
「普通のhtmlではないため、getElementById、などでinput要素を取ることができない」ということですね
ボタンを押したタイミングでモーダルの出力はできているので機能としてはデータを渡す方法を考えるだけだと思っていました

Answer 1

useFormではregisterをgetElementByIdのように使用する必要がありました