React公式ドキュメントを読む21 Reactで作成するフォームの基本

前回からの続きですが、このページだけ読んでも分かる内容になっています。今回読むReact公式ドキュメントは「フォーム」ページの前半です。

フォームは、HTMLのform要素で情報を送信する機能です。Reactにおけるフォームは、state を “信頼できる唯一の情報源”として活用することで、ユーザーのフォーム操作をより柔軟に制御します。

Reactにおけるフォーム作成例

HTMLだけで作成するフォームに比べると、Reactで作成するフォームではユーザー入力をより柔軟に制御できます。

例えば、以下のコードは「名前」を送信するフォームですが、フォーム送信時にユーザーが入力した情報をアラート画面で表示する機能を追加しています。

// クラスで作成したコンポーネント
class NameForm extends React.Component {

  // コンストラクタ
  constructor(props) {
    super(props);
    this.state = {value: ''};  // stateを初期化

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

  // stateを更新するメソッド
  handleChange(event) {
    this.setState({value: event.target.value});
  }

  // アラート画面を表示するメソッド
  handleSubmit(event) {
    alert('入力された名前: ' + this.state.value);
    event.preventDefault();
  }

  // レンダリング要素を返す
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名前:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="送信" />
      </form>
    );
  }
}

//レンダリング
ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

上記のサンプルソースをHTMLファイルにしたものが以下です。

https://programming-world.net/sample/react_doc/forms1-1.html

上記コードで作成される名前欄に文字列を入力して[送信]ボタンを押すと、いま入力した文字列をアラート画面に表示します。

state を “信頼できる唯一の情報源”として利用

Reactのコンポーネントとして作成するフォームでは、 state を “信頼できる唯一の情報源”として利用します。

上記コードで言えば、input要素のvalue属性に指定されているのは this.state.value です。また、アラート画面で入力内容を確認する際に指定されているのも this.state.value です。利用するのは、常に state です。

上記コードでは、ユーザーがキーを打つごとに handleChange()メソッドが実行されます。handleChange()メソッドが実行されると、その都度 state が更新されます。

Reactのフォームでは、ユーザー操作に連動してstate を更新します。ユーザー操作が起きる箇所には、必ず state 更新のためのメソッドが存在することになります。上記コードで言えば handleChange()メソッドがそれに当たります。

state更新のメソッドが存在していることで、ユーザーの入力した内容をチェックしたり、自動変換などの機能を追加しやすくなります。例えば、名前がすべて大文字になるように自動変換するなら、handleChange()メソッドを以下のように書くことも出来ます。

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()});
}

上記の handleChange()メソッドの例では、ユーザーが入力するたびにtoUpperCase()を実行した値が返されて入力値が大文字に自動変換されます。以下のリンクで、実際の挙動を確認できます。

https://programming-world.net/sample/react_doc/forms1-2.html

まとめ

今回は、Reactで作成するフォームの基本について確認しました。 Reactで作成するフォームには、以下の特徴があります。

ユーザー入力をより柔軟に制御できる
state を “信頼できる唯一の情報源”として活用する
ユーザー操作に応じてstate が更新されるように、state更新のためのメソッドが存在している
state更新のためのメソッドが存在しているので、内容チェックや自動変換などの機能を追加しやすい

次回へ続きます。