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

Reactフレームワーク、

Formから値を取得する

について解説です。

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

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

イメージはこちらです↓

筆者プロフィール

【現職】プロマネ/システムプランニング

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

【元】外資系金融機関の営業

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

コードイメージ動画
コード
解説
まとめ

コードイメージ動画

コード

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を表記する

となります

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

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