【React学習用(コピペ可)】Formを扱う「Formから値を取得する」

Reactフレームワーク、

Formから値を取得する

について解説です。

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

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

イメージはこちらです↓

コードイメージ動画

コード

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

まとめ

以上となります

まとめると、

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

となります

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

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