jQueryコールバック関数でreactjsコンポーネントの状態にアクセスする方法

Question

jQueryの "changeDate"イベント（jqueryUI date）コールバック関数から反応するコンポーネントの状態にアクセスする方法。

var subheader = React.createClass({ 

    getInitialState: function() { 
     return { 
      msg: this.props.msg 
     }; 
    }, 

    componentDidMount: function() { 
     $('#date').datepicker({ 
      format: "dd/mm/yyyy" 
     }).on("changeDate", function (e) { 
      console.log(this.state.msg); 
     }); 

    }, 
    render: function() { 
     return (
        // render HTML here. 

     ) 
    } 
}); 

しかし、this.stateを取得することは定義されていません。誰にでも助けてくれますか？

Answer 1

この問題は、React but JavaScript in generalに固有な問題ではありません。

あなたが上位スコープでthisどこかに保存し、それを解決することができます：

componentDidMount: function() { 
    var self = this; 
    $('#date').datepicker({ 
     format: "dd/mm/yyyy" 
    }).on("changeDate", function (e) { 
     console.log(self.state.msg); 
    }); 
}, 

あなたがEcmaScript6を使用している場合は、arrow functionを使用することができます。

componentDidMount: function() { 
    $('#date').datepicker({ 
     format: "dd/mm/yyyy" 
    }).on("changeDate", e => { 
     console.log(this.state.msg); 
    }); 
},