はじめてのReact #10「フォームと連動する」テキストボックス編

この記事は 2018年12月28日 に書かれたものです

10回目ともなるとだいぶReactで何かを作ることにも慣れてきましたねｗ今回はいよいよフォームと関連した処理を書いてみたいと思います。Reactに限らずですがユーザーの入力とリアルタイムに連動して表示が切り替わるのは作っていて楽しいですよね。

1 入力候補を表示してくれるComponent
- 1.1 サンプル
- 1.2 実行結果
2 解説
3 書籍
4 参考ページ

入力候補を表示してくれるComponent

ユーザーが入力した文字に応じて、入力候補を自動的に表示してくれるComponentを作成します。今回も公式ドキュメントにあるサンプルコードを、編集して作成した物です。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>AutoCompletionBox</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    class AutoCompletionBox extends React.Component {
      constructor(props) {
        super(props);
        this.INITIAL_WORD = '入力してください';

        this.state = {
          value: '',                 //ユーザーが入力した文字列が入る
          word: this.INITIAL_WORD    //自動補完用の文字列が入る
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(e) {
        let buff = e.target.value;            //入力された文字列
        let ac   = this.candidateData(buff);  //自動補完された文字列

        this.setState({value: buff, word: ac});
      }
      handleSubmit(e) {
        // 初期文言と自動補完用の文字が異なっていればStateを更新
        if( this.state.word !== this.INITIAL_WORD ){
          this.setState({value: this.state.word});
        }
        e.preventDefault();  //Submitイベントによる画面遷移をキャンセル
      }

      /**
       * 自動補完用の文字列を返却
       */
      candidateData(key){
        let i = key.slice(0,1).toLowerCase();  //先頭の1文字を取り出し小文字に
        let data = {
          a: 'Android',
          b: 'BlackBerryOS',
          f: 'FireFoxOS',
          i: 'iOS',
          t: 'Tizen',
          u: 'Ubuntu Touch',
          w: 'Windows 10 Mobile'
        };

        return( ( i in data )?  data[i]:this.INITIAL_WORD );
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              お使いのスマートフォンのOSは？<br />
              <input type="text" value={this.state.value} onChange={this.handleChange} /><br />
              <input type="submit" value={this.state.word} />
            </label>
          </form>
        );
      }
    }

    ReactDOM.render(
      <AutoCompletionBox />,
      document.getElementById('root')
    );
  </script>
</body>
</html>

実行結果

動画にしました。
テキストボックスに半角英字で文字を入力すると、最初の１文字目を見て自動的に候補の文字列を表示してくれます。候補が表示された状態でボタンをクリック、またはエンターキーを押すと自動的にテキストボックスへ入力されます。

解説

今回はこれまでご紹介してきた内容を使っただけですね。
onChangeイベントが発生する度にhandleChange()メソッドが呼ばれ、onSubmitイベントが発生するとhandleSubmit()メソッドが呼び出されます。各メソッド内では入力内容に応じて必要があればReactが提供するthis.setState()でStateを更新しrender()メソッドで表示内容に更新をかけているという寸法です。

「はじめてのReact」一覧に戻る