フォームの作成と値の更新

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の更新の様子が出力されています（一部抜粋）：

参考記事