Help us understand the problem. What is going on with this article?

ReactJS入門@ES6:コンポーネント編

More than 3 years have passed since last update.

対象者:私を含むReact初心者
次:ReactJS入門@ES6:ReactRouter編


コンポーネントの作成方法

React.Componentを継承しrenderメソッドを実装したクラスがコンポーネントです。

class Table extends React.Component {
  render() {
    return (
      <div>Table Component</div>
    )
  }
}

コンポーネントが扱うデータ

1. props

propsはコンポーネントに渡されるデータです。
propsは変更不可のデータです。

<Table name="hoge" />
class Table extends React.Component {
  render() {
    return (
      <div>
        <div>Table Component</div>
        <div>{this.props.name}</div> // hoge
      </div>
    )
  }
}

2. state

stateはコンポーネント自身のデータです。
stateはconstructorメソッドの内部で初期化します。

class Table extends React.Component {
  constructor() {
    super();
    this.state = {
      checked: false
    };
  }
}

stateの追加や更新にはsetStateメソッドを使用します。
state全体を入れ替える場合は、replaceStateメソッドを使用します。

class Table extends React.Component {
  constructor() {
    super();
    this.state = {
      checked: false
    };
  }
  onClick() {
    this.setState({ checked: !this.state.checked }); // state.checkeを更新
    this.setState({ unchecked: true }); // state.uncheckedを追加
  }
}

注意
setStateメソッドを実行後、即時にstateに反映されません。
stateを確実に取得したい場合は、setStateメソッドに関数を渡し、
コールバックで受け取る方法が用意されています。

  constructor() {
    super();
    this.state = {
      name: 'NAKAMURA'
    };
  }
  onClick() {
    this.setState(
      (state, props) => { return {name: 'KINJO'} },
      () => { console.log(this.state) } // この時点のstate.nameは [KINJO]
    );
    console.log(this.state.name); // この時点のstate.nameは [NAKAMURA]
  }

コンポーネントのthisのBind

ボタンのクリックイベントを拾いthis.onClickを呼び出す場合、
下記のコードはthis.onClickがundefinedとなり動作しません。

class Table extends React.Component {
  onClick() {
    // ここにクリック時の処理を書く
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick}>ボタン</button> // NG
      </div>
    )
  }
}

解決方法は

  1. コンストラクタ内でbindする this.onClick = this.onClick.bind(this);
  2. JSX内でbindする <button onClick={this.onClick.bind(this)}>...
  3. ES7のBind Syntaxを使用する <button onClick={::this.onClick}>...

などがあります。
個人的にはES7のBind Syntaxがシンプルだと思います。
(ES7を使用するリスクを忘れずに)

class Table extends React.Component {
  constructor() {
    super();
    this.onClick = this.onClick.bind(this); // EX:1
  }
  onClick() {
    // ここにクリック時の処理を書く
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick.bind(this)}>ボタン</button> // EX:2
        <button onClick={::this.onClick}>ボタン</button> // EX:3
      </div>
    )
  }
}
HIGAX
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした