はじめに
React Hook Formを使ってバリデーションを実装する中で、inputに対してonChangeを定義した際に警告が発生したため、その解決方法についてまとめました。
実装方法
<Input {...register("name", { required: true })} placeholder="名前" value={name} mb="2" onChange={onchangeName} />;
このようにinputに対してonChangeを定義していました。しかし「onChangeが複数設定されている」と警告されてしまいました。
解決策として、register内にonChangeを組み込む方法を見つけました。
<Input {...register("name", { required: true, onChange: onchangeName })} placeholder="名前" value={name} mb="2"/>;
このようにregisterの中にonChangeを定義することで正しく動作します。
registerにあらかじめonChangeイベントが内部に設定されているようです。
終わりに
今回の経験を通じて、React Hook Formの使い方をさらに理解できました。今後も引き続き学習を頑張りたいと思います。
参考文献
『react-hook-formの使い方まとめ』