如何在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,而是一般的JavaScript.

你可以解决它this在上限范围内保存的问题:

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

如果您使用的是EcmaScript6,可以使用箭头功能:

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