DESIGNMAP

  1. TOP
  2. 公開講座
  3. React入門
  4. 動的に変化するコンポーネントの作成 — React入門【Vol.3】

動的に変化するコンポーネントの作成 — React入門【Vol.3】

いままでは静的なコンポーネントを作成してきました。今回はユーザーが入力すると、表示がリアルタイムに変化するコンポーネントをつくってみます。Webアプリケーションっぽくなります。

Reactでは、コンポーネント内で動的なデータを扱うときに、2つの方法が用意されています。

props

コンポーネントの外から渡された値。読み込み専用で値を変更できません。

state

コンポーネント内で保持できる値。変化することが可能。
コンポーネントが生成される時に、初期化され、その後はコンポーネントの状態を保持できる変数として使います。

props

まずpropsからみていきましょう。
propsは定数です。コンポーネントの外からデータを渡され、表示をします。

「props.html」で保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <script type="text/babel">

    class HelloComponent extends React.Component {
      render() {
        return(
          <h1>こんにちは {this.props.name}さん。</h1>
        );
      }
    }

    ReactDOM.render(
      <HelloComponent name="太郎" />,
      document.getElementById("app")
    );

    </script>
  </body>
</html>

Chromeで開くと、「こんにちは 太郎さん。」が表示されます。
react3-1

<h1>こんにちは {this.props.name}さん。</h1>

{}はJavaScriptのコードです。JSXの中でJavaScriptのコードを書くときは、{}(波括弧)で囲みます。

propsは読み込み専用なので、以下のようなコードはエラーになります。

render() {
this.props.name = "二郎";
return(
Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'(…)

state

propsと違いコンポーネント内で更新が可能な変数です。
「state.html」で保存します。

<script type="text/babel">

    class HelloComponent extends React.Component {
      constructor() {
          super();
          
          this.state = {
            name: "太郎"
          }
      }

      render() {
        return(
          <h1>こんにちは {this.state.name}さん。</h1>
        );
      }
    }

    ReactDOM.render(
      <HelloComponent />,
      document.getElementById("app")
    );

    </script>

Chromeで開くと、「こんにちは 太郎さん。」が表示されます。結果はpropsと同じです。

constructor()はクラスを初期化するメソッドです。ここにstateの定義と初期値をセットしておきます。
stateはオブジェクトで定義します。

ではstateを使って、ユーザーが入力した値が表示されるサンプルをつくってみましょう。
「state2.html」で保存します。

<script type="text/babel">

    class TextChangeComponent extends React.Component {

      constructor() {
        super();
        
        this.state = {
          text: ""
        };

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

      handleChange(e) {
        this.setState({text: e.target.value});
      }

      render(){
        return(
          <div>
            <div>{this.state.text}</div>
            <hr />
            <input type="text" onChange={this.handleChange} value={this.state.text}  />
          </div>
        );
      }
    }

    ReactDOM.render(
      <TextChangeComponent />,
      document.getElementById("app")
    );

</script>

Chromeで開くと、ユーザーの入力値が表示されます。
react3-2

<input type="text" onChange={this.handleChange} value={this.state.text}  />

コンポーネントにonChangeというイベントを設定しています。ユーザーが入力するたびに、handleChange()が呼び出されます。

handleChange(e) {
  this.setState({text: e.target.value});
}

handleChange()の中でsetState()を使いstateを更新しています。引数にオブジェクトを渡すことで、stateの値が更新されます。

eにはイベントオブジェクトが渡されます。e.target.valueで入力した値を取得できます。

<hr />
<input type="text" onChange={this.handleChange} value={this.state.text}  />

hrやinputのような終了タグない要素はXMLのルールに基づいて、スラッシュをいれる必要があります。

スポンサーリンク

プロフィール

DESIGNMAP
制作ディレクター
ON VISITINGを運営。
お問い合わせ