まず、Reactでinput
を使うときは
import { useState } from 'react';
const Field = () => {
const [ text, setText ] = useState('');
return <input value={text} onChange={(e)=>setText(e.target.value)} />
}
のようにinput
のvalue
に値を入れましょう。
というのも、こうしないとDOM(input)が持ってる値とtext
の値が一致している保証が無いからです。
例えば初期値を設定したとしても、
↓のようにvalue
を設定していないと入力欄に初期値は反映されません。
const [ text, setText ] = useState('初期値');
return <input onChange={(e)=>setText(e.target.value)} />
useRef
の方はvalue={ref.current}
と書いても入力時に反映されないので、このような用途では使えません。
結論として最適なのはuseState
ですが、Reactでフォームを書くならReact Hook FormかReact Final Formを使いましょう!
Like!