ReactJSの画面方向の変更を処理する

Question

画面の向き（縦/横）が変更されたときに内容が変化するコンポーネントを作成しようとしています。これは私がやっているものです：

姿勢変更イベントが発生したときの状態が変異していることを確認する方法

var Greeting = React.createClass({ 
    getInitialState: function() { 
     return {orientation: true} 
    }, 
    handleChange: function() { 
     if ('onorientationchange' in window) { 
      window.addEventListener("orientationchange", function() { 
       this.setState({ 
        orientation: !this.state.orientation 
       }) 
       console.log("onorientationchange"); 
      }, false); 
     } else if ('onresize' in window) { 
      window.addEventListener("resize", function() { 
       this.setState({ 
        orientation: !this.state.orientation 
       }) 
       console.log("resize"); 
      }, false); 
     } 
    }, 
    render: function() { 
     var message = this.state.orientation ? "Hello" : "Good bye" 
     return <p>{message}</p>; 
    } 
}); 

ReactDOM.render(
    <Greeting/>, document.getElementById('container')); 

。

Answer 1

this.setStateへのお電話は間違っています。次のように変更する必要があります。

handleChange: function() { 
    var self = this;   // Store `this` component outside the callback 
    if ('onorientationchange' in window) { 
     window.addEventListener("orientationchange", function() { 
      // `this` is now pointing to `window`, not the component. So use `self`. 
      self.setState({ 
       orientation: !self.state.orientation 
      }) 
      console.log("onorientationchange"); 
     }, false); 
    }