外部ライブラリを利用時にonChangeが発火しなくて困った話

Qiita株式会社 Advent Calendar 2021の25日目の担当は、プロダクト開発グループの @kiitan です！

はじめに

Qiita Jobsではプロフィール入力を楽にするためWantedlyのフォーム自動入力ボタンを利用しています

Wantedlyのフォーム自動入力ボタン の機能に軽く触れておくと転職活動を行う際に必ず入力が必要な名前や年齢などを Wantedly上にプロフィールからワンクリックでフォームにコピーすることができる便利なボタンです

この記事は Wantedlyのフォーム自動入力ボタン を React で書かれたフォームに導入しようとして困った話です

入力されるがStateに反映されない

説明するより触ってもらったほうが早いので早速みていきましょう

See the Pen react hooks useState by kiitan128 (@kiitan) on CodePen.

一見しっかり入力されているようですが <p>あなたの年齢は{age}歳です</p> の部分で年齢が表示されていないことで state へ反映されていないことがわかります

原因は Wantedly のフォーム自動入力ボタンで input の value を書き換えても onChange が発火しないことでした
これは Wantedly のフォーム自動入力ボタンが特別 onChange が発火しないのではなく value を javaScript で直接書き換えを行なった場合に発生します

See the Pen react hooks useState by kiitan128 (@kiitan) on CodePen.

上記の例では document.querySelector(".inputStyle").value = では onChange が発火しないことがわかります
これは通常であれば document.querySelector(".inputStyle").onchange() を入れることで解決できる問題です

しかし外部ライブラリを利用する今回の場合ではこの対策をすることができません

解決編

最終的なコードは泥臭いものとなりました
下記のコードのように state と value の値を setInterval で監視し差分があれば反映する方法を使いました

React.useEffect(() => 
  setInterval(() => {
    if(age !== ageRef.current.value) {
     setAge(ageRef.current.value)
    }
  }, 1000)
, [])

See the Pen react hooks useState by kiitan128 (@kiitan) on CodePen.

これで無事stateに反映することができました
もっといいやり方やアイデアがあればコメント欄で教えてください

終わりに

明日の投稿を担当するのはこの記事を見た皆さんです