Reactのinput入力をswitch文とsetStateを使い合わせて値を変更する

2020年12月13日2021年1月24日

Reactを使うと必ずというほど使う、setState。
これをinputで入力を受け付けた時に値を保持するために使用します。

入力された文字列をsetStaetで受け付けてあげましょう。

create-react-app コマンドを使用してReactを作ります。
設定未だの方はこちらからご覧ください。

ファイル構成の確認とやることの確認

まずは今回作成するファイル階層を確認します。
コマンドにて $ create-react-app app をたたいたら以下のようなファイル構成ができるはずです。

app
  ├── public
  └── src
        ├── App.css
        ├── App.js
        ├── index.js
        └── その他省略...

画面はinputで入力欄があり、それをstateで保持するだけのものです。

編集するコード

今回触るのはsrc/App.jsファイルのみです。
以下がコードになります。

import React from 'react';
import './App.css';

export class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      aaa: '',
      bbb: '',
      ccc: '',
      ddd: '',
      eee: '',
      num: 0
    };
  }

  render() {
    const { aaa, bbb, ccc, ddd, eee, num } = this.state;

    return (
      <div class='App'>
        <h1>setState</h1>
        <div class='container'>
          <div>
            <span>aaa: </span>
            <input name='text' value={aaa} onChange={(event) => { this.setStateAction(event, 'aaa') }} />
          </div>
          <div>
            <span>bbb: </span>
            <input name='text' value={bbb} onChange={(event) => { this.setStateAction(event, 'bbb') }} />
          </div>
          <div>
            <span>ccc: </span>
            <input name='text' value={ccc} onChange={(event) => { this.setStateAction(event, 'ccc') }} />
          </div>
          <div>
            <span>ddd: </span>
            <input name='text' value={ddd} onChange={(event) => { this.setStateAction(event, 'ddd') }} />
          </div>
          <div>
            <span>eee: </span>
            <input name='text' value={eee} onChange={(event) => { this.setStateAction(event, 'eee') }} />
          </div>
          <div>
            <span>num: </span>
            <input name='number' value={num} onChange={(event) => { this.setStateAction(event, 'num') }} />
          </div>
        </div>
      </div>
    );
  };

  setStateAction = (event, type) => {
    const state = this.state;
    const value = event.target.value

    switch (type) {
      case 'aaa':
        this.setState({ ...state, aaa: value });
        break;
      case 'bbb':
        this.setState({ ...state, bbb: value });
        break;
      case 'ccc':
        this.setState({ ...state, ccc: value });
        break;
      case 'ddd':
        this.setState({ ...state, ddd: value });
        break;
      case 'eee':
        this.setState({ ...state, eee: value });
        break;
      case 'num':
        this.setState({ ...state, num: Number(value) });
        break;
      default:
        break;
    };
  };
};

export default App;

コード説明

stateを使うための準備をします。こちらで状態を保持します。

  constructor(props) {
    super(props);

    this.state = {
      aaa: '',
      bbb: '',
      ccc: '',
      ddd: '',
      eee: '',
      num: 0
    };
  }

stateから値を取り出します。
this.state.aaa や this.state.bbb でも使えます。

const { aaa, bbb, ccc, ddd, eee, num } = this.state;

こちらで入力欄を作っています。
onChangeが文字が入力されると働き、準備していた関数のsetStateAction にて処理をします。

          <div>
            <span>aaa: </span>
            <input name='text' value={aaa} onChange={(event) => { this.setStateAction(event, 'aaa') }} />
          </div>

setStateで値を更新します。switch文でcase毎に分けて処理します。
こちらの関数が今回のメインの部分です。

  setStateAction = (event, type) => {
    const state = this.state;
    const value = event.target.value

    switch (type) {
      case 'aaa':
        this.setState({ ...state, aaa: value });
        break;
      case 'bbb':
        this.setState({ ...state, bbb: value });
        break;
      case 'ccc':
        this.setState({ ...state, ccc: value });
        break;
      case 'ddd':
        this.setState({ ...state, ddd: value });
        break;
      case 'eee':
        this.setState({ ...state, eee: value });
        break;
      case 'num':
        this.setState({ ...state, num: Number(value) });
        break;
      default:
        break;
    };
  };