React公式ドキュメントを読む22 Reactにおけるtextareaとselectの操作

前回からの続きです。今回読むReact公式ドキュメントは「フォーム」ページの中盤です。

標準のHTMLとReactでは、textarea要素・select要素の扱い方が少し異なります。 Reactにおけるtextarea要素・select要素の操作について見ていきましょう。

Reactにおけるtextarea要素

HTMLにおけるtextarea要素は、要素内容としてテキストを持ちます。例えば、以下のような感じです。

<textarea>
  ここに感想をどうぞ！
</textarea>

一方、Reactにおけるtextarea要素では、value属性としてテキストを持ちます。例えば、テキスト内容を持ったテキストエリアを描画する際には、以下のように記述します。

// EssayFormコンポーネント
class EssayForm extends React.Component {
  // コンストラクタ
  constructor(props) {
    super(props);

    // stateの初期値を設定
    this.state = {
      value: 'ここに感想をどうぞ！'
    };

    // メソッドをバインド
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // クラスメソッド
  handleChange(event) {
    this.setState({value: event.target.value});
  }

  // クラスメソッド
  handleSubmit(event) {
    alert('入力された内容: ' + this.state.value);
    event.preventDefault();
  }

  // レンダリング要素を返す
  // textarea要素のvalue属性に送信内容テキストを指定
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          感想:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="送信" />
      </form>
    );
  }
}

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

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

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

Reactにおけるtextarea要素はvalue属性としてテキストを持つので、input要素で作成する一行テキストボックスと同じようにコードを書けます。

Reactにおけるselect要素

HTMLにおけるselect要素は、ドロップダウンリストを作成します。例えば、以下のように記述すると、selected属性を指定されたココナッツが選択された状態のドロップダウンリストが作成されます。

<select>
  <option value="grapefruit">グレープフルーツ</option>
  <option value="lime">ライム</option>
  <option selected value="coconut">ココナッツ</option>
  <option value="mango">マンゴー</option>
</select>

一方、Reactにおけるselected要素では、selected属性の代わりにvalue属性を使用します。例えば、ココナッツが選択された状態のドロップダウンリストを作成する際には、以下のように記述します。

//FlavorFormコンポーネント
class FlavorForm extends React.Component {
  // コンストラクタ
  constructor(props) {
    super(props);
    // stateの初期値として'coconut'を指定
    this.state = {value: 'coconut'};

    // メソッドをバインド
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // クラスメソッド
  handleChange(event) {
    this.setState({value: event.target.value});
  }

  // クラスメソッド
  handleSubmit(event) {
    alert('選択された味: ' + this.state.value);
    event.preventDefault();
  }

  // レンダリング要素を返す
  // select要素のvalue属性にstateの値を指定
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          味を選択してください:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">グレープフルーツ</option>
            <option value="lime">ライム</option>
            <option value="coconut">ココナッツ</option>
            <option value="mango">マンゴー</option>
          </select>
        </label>
        <input type="submit" value="送信" />
      </form>
    );
  }
}

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

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

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

上記コードでは、コンストラクタのなかでstateの初期値として’coconut’を指定しています。そして、select要素のvalue属性の値にstateを指定することで、 ‘coconut’ が初期選択されます。

Reactでselect要素によるドロップダウンリストを作成する場合、初期選択されるオプションの値はstateで管理してvalue属性に指定します。

選択肢の数だけあるoptionではなく、select要素のvalue属性の値を操作すればよいので、ドロップダウンリストの挙動をシンプルに管理できます。

尚、Reactにおいて、select要素で複数のオプションを選択するには、select要素のvalue属性の値に配列を指定します。以下のコードは、value属性の値に配列を指定して、複数のオプションを選択するように指定した例です。

<select multiple={true} value={['B', 'C']}>

まとめ

今回は、Reactにおけるtextarea要素・select要素の操作について、標準のHTMLとの違いに注目して確認しました。

Reactで作成するtextarea要素には、以下の特徴があります。

HTMLではtextarea要素は要素内容としてテキストを持つが、Reactではtextarea要素のvalue属性としてテキストを持つ
Reactでは、textarea要素のvalue属性に指定する値を state で管理する

また、Reactで作成するselect要素には、以下の特徴があります。

HTMLでドロップダウンリストのオプションを初期選択させるにはoption要素にselected属性を指定しますが、Reactではselect要素のvalue属性の値で指定します。
Reactでは、select要素のvalue属性に指定する値を state で管理する
Reactでselect要素で複数のオプションを選択するには、select要素のvalue属性の値に配列を指定する

次回へ続きます。