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>
    )
  }
}