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

Reactフレームワーク、

Formから値を取得する

について解説です。

フォームにコードを打ち込むと、

ほぼ同時にHTML上に文字が反映されます

イメージはこちらです↓

筆者プロフィール

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

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

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

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

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

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

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

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

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

created by Rinker

コードイメージ動画

コード

import React from "react"

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

    handleChange(e) {
        this.setState({firstName: e.target.value})
    }

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

export default App

解説

constructor()内

this.state = {firstName:””}

stateにキーを作成する

handleChange関数

    handleChange(e) {
        this.setState({firstName: e.target.value})
    }

関数名()内の(e)は(event)とする方も多いかと思います

これにより、

e.target.value

として、打ち込んだ文字を取得することができます

{firstName: e.target.value}

をsetStateすることで、打ち込んだ文字がconstructor()で作成したfirstNameに代入される

render()内、inputタグ

onChangeに上記のhandleChange関数を入れる

下の、<h1>タグで、state.firstNameを表記する

まとめ

以上となります

まとめると、

constructor内で、this.stateにキーを作成
handleChange関数でそのキーにinputされた値を入れるよう指示を出す
inputタグのonChangeとhandleChange関数を紐づけ、h1タグでthis.stateを表記する

となります

ご自身でも色々と試してみて下さい！

本日もありがとうございました！