Reactでフォームから入力された値を表示させてみる



React + yarn + webpack でとりあえず Hello World! する - BppLOG の続き

今度は、ブラウザ上で「Tom」と入力されるのを受けて、「Hi Tom!」と表示されるようにしてみます。


Greeting.js の component を作成します。

import React, { PropTypes } from 'react';

function Greeting(props) {
   return (<div>Hi {props.name}!</div>);
 }
 
Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Greeting;

受け取る prop の型の指定が必要なので、Greeting.propTypes で指定していく。
さらに、isRequired を指定するか、デフォルトpropsを指定して必要があるので指定する。

ひとまずこのcomponentを動かしてみます。
Ehoc.js を書き換えます。

import React, { Component } from 'react';

import Greeting from './greeting';

class Echo extends Component {
  render() {
    return (
      <div>
        <Greeting name="Tom" />
        <Greeting name="Jelly" />
      </div>
    );
  }
}

export default App;

この状態でブラウザにアクセスすると

Hi Tom!
Hi Jelly!

と表示されるようになりました。

React の component はトップレベルは1つである必要があるので、

<div></div>

で囲っています。

続いて、component に state を持たせてみます。
constructor を利用して、state をセットして、その値を component に渡します。

import React, { Component } from 'react';

import Greeting from './greeting';

class Echo extends Component {
  constructor(props) {
    super(props);
    this.state = {
        name: 'Tom';
    }
  }
  render() {
    return (
      <div>
        <Greeting name={this.state.name} />
      </div>
    );
  }
}

そして、setState を利用してフォームからの入力を受け取って動的に変更できるようにしてみます。
setState は this.state への代入と再レンダリングを行ってくれるので view の反映までがされます。

import React, { Component } from 'react';

import Greeting from './greeting';

class Echo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Tom',
    };
  }

  handleNameChange(name) {
    this.setState({ name });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={e => this.handleNameChange(e.target.value)}
        />
        <Greeting name={this.state.name} />
      </div>
    );
  }
}

export default App;

となります。
また、

handleNameChange(name) {
    this.setState({ name: name });
}

handleNameChange(name) {
    this.setState({ name });
}

と表記を省略できます。

そして、ブラウザにアクセスすると

f:id:tky_bpp:20171010151840p:plain

このようになっているので、フォームに入力してみると、反映されるようになりました。

f:id:tky_bpp:20171010151849p:plain


なるほど、少しずつ state を理解出来るようになってきたので引き続き勉強していきます。


Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック

いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発

  • 作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2015/04/03
  • メディア: 大型本
  • この商品を含むブログ (2件) を見る