ReactでonChangeからValueを取得したいときはないでしょうか。
けど、そんな中で悩むことは、
・ReactでonChangeから複数同時にValueを取得する方法がわからならい
ですよね。
今回はそんなお悩みを解決する
・ReactでonChangeから複数同時にValueを取得する方法
についてまとめます！
もくじ
ReactでonChangeからValueを取得する方法
onChangeでuseStateへ渡した配列に値を追加しリストを再表示させる
onChangeでuseStateへ渡した配列に値を追加しリストを再表示させる方法について説明をします。
イメージとしては入力フォームの値入力をonChangeで広い、ステートへ保存します。
ボタンクリック後にステートの値を取得し、別のステートの配列に追加し、その結果を画面上にリスト表示させていきます。
サンプルコード
サンプルコードはこちらになります。
import { useState } from "react"
function App() {
const [value1, setValue1] = useState(["A商品","B商品","C商品"]);
const [value2, setValue2] = useState("");
const handleEdit = () => {
setValue1([...value1, value2]);
}
const handleEditFormChange = (e) => {
setValue2(e.target.value);
}
const list = value1.map((value) => <li key={value}>{value}</li>);
return (
<div>
<ul>
{list}
</ul>
<input
type="text"
value={value2}
onChange={handleEditFormChange}
/>
<button onClick={handleEdit}>保存</button>
</div>
);
}
export default App;入力フォームに値を入力し、保存ボタンをクリックします。
入力した値が配列へ追加され、その結果が画面に表示されていますね。
コードの説明
入力フォーム用にステートを定義しています。
const [value2, setValue2] = useState("");ボタンクリック時に受け取るハンドルです。入力フォームのステート変数を配列に代入しています。
const handleEdit = () => {
setValue1([...value1, value2]);
}入力フォーム操作時に値を受け取るハンドルです。受け取った値はステートへ保存されます。
const handleEditFormChange = (e) => {
setValue2(e.target.value);
}入力フォームの設定です。変更後にハンドラーが起動されます。
<input
type="text"
value={value2}
onChange={handleEditFormChange}
/>保存ボタンです。ボタンクリック後にハンドラーが起動されます。
<button onClick={handleEdit}>保存</button>ReactでonChangeから複数同時にValueを取得する方法
onChangeで複数同時にuseStateへ渡した配列に値を追加しリストを再表示させる
onChangeで複数同時にuseStateへ渡した配列に値を追加しリストを再表示させる方法について説明をします。
サンプルコード
サンプルコードはこちらになります。
import { useState } from "react"
function App() {
const [value1, setValue1] = useState(["A商品","B商品","C商品"]);
const [value2, setValue2] = useState("");
const [value3, setValue3] = useState("");
const handleEdit = () => {
setValue1([...value1, value2, value3]);
}
const handleEditFormChange = (e) => {
setValue2(e.target.value);
}
const handleEditFormChange1 = (e) => {
setValue3(e.target.value);
}
const list = value1.map((value) => <li key={value}>{value}</li>);
return (
<div>
<ul>
{list}
</ul>
<input
type="text"
value={value2}
onChange={handleEditFormChange}
/>
<input
type="text"
value={value3}
onChange={handleEditFormChange1}
/>
<button onClick={handleEdit}>保存</button>
</div>
);
}
export default App;2つの入力フォームに値を入力し、保存ボタンをクリックします。
入力した値が配列へ追加され、その結果が画面に表示されていますね。
コードの説明
入力フォーム用にステートを追加しています。
const [value2, setValue2] = useState("");
const [value3, setValue3] = useState("");ボタンクリック時に受け取るハンドルです。入力フォームのステート変数を配列に代入しています。
const handleEdit = () => {
setValue1([...value1, value2, value3]);
}入力フォーム操作時に値を受け取るハンドルを追加しています。受け取った複数の値をまとめてステートの配列に追加しています。
const handleEditFormChange = (e) => {
setValue2(e.target.value);
}
const handleEditFormChange1 = (e) => {
setValue3(e.target.value);
}入力フォームの設定です。変更後にハンドラーが起動されます。
<input type="text" value="{value2}" />
<input type="text" value="{value3}" />保存ボタンです。ボタンクリック後にハンドラーが起動されます。
<button onClick={handleEdit}>保存</button>さいごに
いかがでしょうか。
今回は、
・ReactでonChangeから複数同時にValueを取得する方法
についてまとめました。
また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました！
＞＞Amazonで詳細を見る
電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。
この記事の関連キーワード
「React Hook」の関連記事
こちらの記事の内容「React Hook」に関連する記事一覧です。
