2021/8/19

React + Node.js

フォーム部品の扱い

テキストボックス

import React from 'react'
import ReactDOM from 'react-dom'

class TextForm extends React.Component {
  constructor(props){
    super(props)
    this.state = { value: '' }
  }

  render () {
    // フォームにテキストボックスを指定
    return (
      <div>
        <form onSubmit={e => this.doSubmit(e)}>
          <input type='text'
            onChange={e => this.doChange(e)}
            value={this.state.value} />
          <input type='submit' />
        </form>
      </div>
    )
  }
  // テキストボックスを変更したとき
  doChange (e) {
    this.setState({ value: e.target.value })
  }

  // フォームを送信した時
  doSubmit (e) {
    e.preventDefault()
    window.alert(this.state.value)
  }
}

ReactDOM.render(
  <TextForm />,
  document.getElementById('root')
)

チェックボックス

import React from 'react'
import ReactDOM from 'react-dom'

class CBoxForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { check: true }
  }

  render() {
    // フォームにチェックボックスを指定
    return ( <div>
      <form onSubmit={e => this.doSubmit(e)}>
        <label>
          <input type="checkbox"
            onChange={e => this.doChange(e)}
            checked={this.state.check} 
            />食べる
        </label><br />
        <input type="submit" value='決定' />
      </form>
    </div>) 
  }

  // チェックボックスをクリックした時
  doChange (e) {
    this.setState({ check: !this.state.check })
  }

  // フォームを送信した時
  doSubmit (e) {
    e.preventDefault()
    window.alert(this.state.check ? '食べる' : '食べない')
  }
}

ReactDOM.render(
  <CBoxForm />,
  document.getElementById('root')
)

テキストエリア

import React from 'react'
import ReactDOM from 'react-dom'

class TextAreaForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: 'Hello' }
  }

  render () {
    // フォームにテキストエリアを指定
    return ( <div>
      <form onSubmit={e => this.doSubmit(e)}>
        <textarea
          onChange={e => this.doChange(e)}
          value={this.state.value}
          /><br />
        <input type="submit" value='決定'/>
      </form>
    </div>)
  }

  // テキストエリアを変更したとき
  doChange (e) {
    this.setState({ value: e.target.value })
  }
  // フォームを送信した時
  doSubmit (e) {
    e.preventDefault()
    window.alert(this.state.value)
  }
}

ReactDOM.render(
  <TextAreaForm />,
  document.getElementById('root')
)

ラジオボタン

import React from 'react'
import ReactDOM from 'react-dom'

class TextAreaForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: 'Hello' }
  }

  render () {
    // フォームにテキストエリアを指定
    return ( <div>
      <form onSubmit={e => this.doSubmit(e)}>
        <textarea
          onChange={e => this.doChange(e)}
          value={this.state.value}
          /><br />
        <input type="submit" value='決定'/>
      </form>
    </div>)
  }

  // テキストエリアを変更したとき
  doChange (e) {
    this.setState({ value: e.target.value })
  }
  // フォームを送信した時
  doSubmit (e) {
    e.preventDefault()
    window.alert(this.state.value)
  }
}

ReactDOM.render(
  <TextAreaForm />,
  document.getElementById('root')
)

セレクトボックス

import React from 'react'
import { ReactDOM } from 'react-dom'

class SelectForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      items: props.items,
      value: props.value
    }
  }
  render () {
    // セレクトボックスの選択肢を生成
    const options = this.state.items.map( i => {
      return( <option key={i}
        value={i}> {i}
        </option>)
    })
    
    // フォームにセレクトボックスを指定
    return( <div>
      <form onSubmit={e => this.doSubmit(e)}>
        <select 
          value={this.state.value}
          onChange={e => this.doChange(e)}>
            {options}
        </select><br />
        <input type="submit" />
      </form>
    </div>)
  }
  
  // セレクトボックスを変更した時
  doChange (e) {
    this.setState({ value: e.target.value })
  }

  // フォームを送信した時
  doSubmit (e) {
    e.preventDefault()
    window.alert(this.state.value)
  }
}

ReactDOM.render(
  <SelectForm 
    items={['チョコ', '梅干し', 'ラムネ']}
    value='ラムネ' />,
  document.getElementById('root')
)