【React学習用】Formを扱う複数のFormから値を取得する

Reactフレームワーク、

複数のFormから値を取得する

について解説です。

間違った記述をしてしまうとこんな感じになります

下記のように正しい記述ができるよう解説をしていきます

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/24 14:20:49時点 Amazon調べ-詳細)

「複数のフォームから値を取得する」イメージ動画

コード

import React from "react"

class App extends React.Component{
    constructor(){
        super()
        this.state = {
            firstName: "",
            lastName: "",
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        const {name, value} = e.target
        this.setState({
            [name]: value
        })
    }

    render(){
        return (
            <form>
                <input 
                    type="text" 
                    name="firstName" 
                    value={this.state.firstName}
                    placeholder="First Name" 
                    onChange={this.handleChange} 
                />
                <input 
                    type="text" 
                    name="lastName" 
                    value={this.state.lastName}
                    placeholder="Last Name" 
                    onChange={this.handleChange} 
                />
                    <h1>{this.state.firstName} {this.state.lastName}</h1>
            </form>
        )
    }
}

export default App

解説

全てはここにあり！

handleChange(e) {
        const {name, value} = e.target
        this.setState({
            [name]: value
        })
    }

const {name, value} = e.target

e.targetから「name」、「value」を取り出し、

[name]: value

それぞれのname変数にvalueを格納する

注意点としては、

<input 
                    type="text" 
                    name="firstName" 
                    value={this.state.firstName}
                    placeholder="First Name" 
                    onChange={this.handleChange} 
                />
                <input 
                    type="text" 
                    name="lastName" 
                    value={this.state.lastName}
                    placeholder="Last Name" 
                    onChange={this.handleChange} 
                />

<input />内のnameに、this.stateのキーと同じ名前を指定すること

それにより、

[name]:value

が成り立ち、this.stateの値も正しく変更が反映されます