Reactでシンプルな入力フォーム
Reactアプリケーションでシンプルな入力フォームを作るには?
シンプルな入力フォームとして、textbox, buttonを配置してみる。
結果
Reactでシンプルな入力フォームを作成出来た。
また、textboxに入力した値を表示させる方法について理解した。
Reactの1つの特徴を垣間見た気がしました。
シンプルな入力フォームのコード
render()でtextbox, buttonを定義する。
textbox
textboxは、値が変更された時(すなわち入力した時)に発火されるchangeイベントにupdateというイベントハンドラを設定する。
また、valueには、this.state
にあるvalueを設定する。
これにより、textboxに何がしか入力した時に、update関数が呼ばれ、this.state.value
が更新される。
stateが更新されることで、render()が呼ばれ再描画が実行される。
button
特筆すべきことは無いので省略。
import React, {Component} from 'react' export default class SimpleForm extends Component { constructor (props) { super(props) this.state = {value: ''} } update (e) { this.setState({value: e.target.value}) } submit (e) { window.alert('Inputted value: ' + this.state.value) e.preventDefault() } render () { return ( <form onSubmit={e => this.submit(e)}> <input type='text' value={this.state.value} onChange={e => this.update(e)} /> <input type='submit' value='send' /> </form> ) } }