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


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

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


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

あわせて読みたい
React環境設定をしてHelloWorldを表示しよう 面倒な環境設定。既にインストール済みの場合もあると思います。バージョンの確認をしてインストール済みかどうかを確認してください。 Node.jsのインストール 下記のUR...
目次

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


まずは今回作成するファイル階層を確認します。
コマンドにて $ 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;
    };
  };

所感


数値の入力欄も上のコードの中で書いてみましたが、そのままではうまく動きそうにないです。

文字列が入力されるとエラーがでて、「NaN」と表示されバグります。

数値の入力欄の場合は、チェックする関数や正規表現等で文字列を弾く処理が必要そうです。

switch文を使う前までは一個一個setStateAaaやsetStateBbbと関数を作っていて大変だった。
それでも間違いではないのですが、無駄に関数ができて読みづらくなってしまいます。

switch文でコードをスッキリさせた書き方が個人的には好みです。

あとstateの値の使い方なのですが、
前まではthis.state.aaaと毎回書いてました。。
一つくらいのstateしかないのでしたら良いのですが、複数になると毎回書くの面倒です。

stateから一気に値を取得する方法も覚えておきましょう。
const { aaa, bbb, ccc, ddd, eee, num } = this.state;

もちろん使わないのは取得する必要はないのでご注意を。

以上、setStateの使い方とstateの値の取得方法でした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次