フォームの作成と値の更新
test.js
[value, setValue] = React.useState("")
で、変数とその値の更新の関数を宣言できます。setValue(xxx)を実行する度にvalueがxxxに更新されて、それらが宣言された関数(コンポーネント)が再実行されます。例えば次のコードでは画面には返り値のフォームが表示されていて、その入力が更新されるとonChangeの中の関数が呼び出されます。すると、値が更新されて再実行によって更新後の値がコンソールに表示されます。
App.js
import React from "react"
function App() {
const [firstName, setFirstName] = React.useState("")
console.log(firstName)
function handleChange(event) {
setFirstName(event.target.value)
}
return (
<form>
<input
type="text"
placeholder="First Name"
onChange={handleChange}
/>
</form>
)
}
export default App;
なお、以下のようにindex.htmlを作成します。<div id="root"></div>にrootと紐づけたindex.jsの中身(正確にはそこで呼び出したApp.jsの関数App)であるフォームが呼び出されています。
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
例えばjohnと打ち込んでみると
一文字打つごとに値が更新されてコンソールにそのログが表示されていきます。
構造体の更新
今は文字列が変数でしたが、構造体でも同様の操作ができます。そのためには、キーと値を指定して更新するようにします。
App.js
import React from 'react';
import './App.css';
function App() {
const [formData, setFormData] = React.useState(
{firstName:"",lastName:"",email:""}
);
console.log(formData);
function handleChange(event) {
setFormData(prevFormData => {
//配列の要素の追加方法と同様
return {
...prevFormData, [event.target.name]: event.target.value
}
});
}
return (
<form>
<input
type="text"
placeholder="First Name"
onChange={handleChange}
name="firstName"
value={formData.firstName}
/>
<input
type="text"
placeholder="Last Name"
onChange={handleChange}
name="lastName"
value={formData.lastName}
/>
<input
type="text"
placeholder="email"
onChange={handleChange}
name="email"
value={formData.email}
/>
</form>
)
};
export default App;
例えば次のように打ち込んでみると、
コンソールには構造体formDataの更新の様子が出力されています（一部抜粋）：
