Inputタグにて、zustandのストアを正しく更新したり、ユーザーの入力を正しく受け付けることができない
この記事を作った動機 React + Zustand + TypeScirpt の組み合わせで、Input タグにて躓いたことがあったので記録したい。具体的な症状としては、要素の内容を変更しようとしても、一切微動だにせず、値を変えることができないという症状がある。 問題の挙動 期待する挙動 問題が起こったコード 問題がない部分 // ... <LabelTextEntryItem name="IP / URL" callback={(resultString:string) => { setNetwork((prev) => ({ ...prev, IPorDomainName: resultString })) }} init={getNetwork().IPorDomainName} ></LabelTextEntryItem> // ... 問題がある部分 // ... export function LabelTextEntryItem({ name , init , callback}:{ name:string, init:string , callback:(result:string) => void }){ return <div className="flex flex row mb-4"> <div className="label text-xl noSelect">{name}:</div> <div className="ml-auto"> <HoverAnimation> // 問題の箇所 -------------------- // 問題の箇所 -------------------- <input className="ml-auto text-xl w-30" id="entry" value={init} type="text" onChange={(event:ChangeEvent<HTMLInputElement>) => { callback(event.target.value) }}></input> // 問題の箇所 -------------------- // 問題の箇所 -------------------- </HoverAnimation> </div> </div> } // ... 解決に至った方法 問題が再現する条件として、Zustandで定義したストアの内容をInputタグにて表示するときにvalueの引数としてそれを指定していることがある。解決のためには、defaultValueとしてZustand内の内容を表示するようにすることで解決された。なぜこれで症状が解決するのかは分かってない。コンソールでコールバックが呼ばれたときの内容を確認してみたところ、valueとして引数にZustandの内容を与えても、値自体は更新された値がコールバックに正しく伝達できていることが確認でき、コールバック内の値の更新処理が上手くいかない理由が不明である。defaultValueとvalueのinputタグにおける違いとは多分値の拘束力なのではないか？と思われる。valueに固定値を指定してしまうと、編集不能になるとかでもあるのだろうか？ ...