フォーム

制御コンポーネント Controlled Component useStateを使い、stateで値を保持する name属性とstateプロパティの名前を一致させる値はvalueに設定する。

const [form, setForm] = useState({email："xx@xx"})
<input name="email" value={form.email} />

算出プロパティ名。変数を[]で囲うとプロパティ名として使える
setForm(
  { ...form, [e.target.name]: e.target.value }
)

非制御コンポーネント Uncontrolled Component stateで保持せず、使う際に取得する useRefは必ずnullにする。値を入れると変更できなくなる。値はrefに設定する。初期値はvalue,checked要素は使わない。defaultValue,defaultCheckedを使う。

const email = useRef(null);
<input name="email" ref={email} defaultValue="xx@xx"/>
email.current.value で取得。

ポータル子コンポーネントを親コンポーネントとは別の場所に描画するためのしくみ createPotal(埋め込むReact, 埋め込み先タグ)
コントロール input系はhtmlと同じ

テキストエリア <textarea value={form.memo} />
選択 <select value={form.fruits} />
選択複数 <select multiple={true} value={配列で渡す} /> e.target.optionsから取得
ラジオ <input type="radio" checked={form.sex === "male"} value="male" />
チェック <input type="checkbox" checked={form.send} />
チェック複数 <input type="checkbox" checked={form.cars.includes("toyota")} value="toyota" /> includesでデータにあったらチェック
ファイル <input type="file" > 
const file = useRefを使い、file.current.files[0]で取得

PUROGU LADESU

ポエムがメインのブログです。

React フォーム

フォーム