DOMイベントリスナー

注意:
ここではReactから提供されないDOMイベントの割り当て方法について説明します(詳細はこちら)。 これはjQueryのような他のライブラリと統合する場合に知っておくと良いでしょう。

ウインドウのサイズ変更を試してみましょう。

var Box = React.createClass({
  getInitialState: function() {
    return {windowWidth: window.innerWidth};
  },

  handleResize: function(e) {
    this.setState({windowWidth: window.innerWidth});
  },

  componentDidMount: function() {
    window.addEventListener('resize', this.handleResize);
  },

  componentWillUnmount: function() {
    window.removeEventListener('resize', this.handleResize);
  },

  render: function() {
    return <div>Current window width: {this.state.windowWidth}</div>;
  }
});

React.render(<Box />, mountNode);

componentDidMountは、コンポーネントがマウントされてDOM表現を得た後に呼び出されます。 多くのケースで、一般的なDOMイベントが割り当てられるのはここになります。

このイベントコールバックはReactのコンポーネントに反映されますが、オリジナルの要素には反映されないことに注意して下さい。 Reactは自動バインディングの処理を通して、 自動的に現在のコンポーネントのインスタンスにメソッドをバインドします。

 Back to top

© 2013-2017 Facebook Inc.
Documentation licensed under CC BY 4.0.

このページは、ページトップのリンク先のReact内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • ドキュメントの情報が古い可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。