在回调中使用它

Question

我已经阅读了 this question and ，应该更适合我的需要。

但是，我还是没明白。

我有这个代码

class DivRatingOverall extends React.Component  {

constructor(props) {
    super(props);
    let overallRatingMeta = wp.data.select('core/editor').getCurrentPost().meta.overall_rating;
    this.state = {overallRating: overallRatingMeta};

    this.printDivOverallRater = this.printDivOverallRater.bind(this);
}

printDivOverallRater() {
        return (
        <div id="overall-rater-panel" ref={()=>
            raterJs({
                starSize: 32,
                step: 0.1,
                showToolTip: false,
                rating: this.state.overallRating,
                readOnly: false,
                element: document.querySelector("#overall-rater-panel"),
                rateCallback: function rateCallback(rating, done) {

                    rating = rating.toFixed(1);
                    rating = parseFloat(rating);
                    this.setRating(rating);

                    wp.data.dispatch('core/editor').editPost(
                        { meta: { overall_rating: rating } }
                    );

                    //I can't access setState here
                    //this.setState({overallRating: rating});

                    done();
                }
            })
        }
        />
    )
}

render () {
    return (
        <div>
            {this.OverallRateThis}
            <div>
                {this.printDivOverallRater()}
            </div>
        </div>

    );
}

但是，在回调函数中，我无法访问 this.setState，因为 this 现在引用 raterJS，an exteranl js library that I use

如何在回调中更改状态？

Answer 1

使用箭头函数将其保存在更高范围内

// arrow function preserve this
printDivOverallRater() {
    return (
    <div id="overall-rater-panel" ref={()=>
        raterJs({
            starSize: 32,
            step: 0.1,
            showToolTip: false,
            rating: this.state.overallRating,
            readOnly: false,
            element: document.querySelector("#overall-rater-panel"),
            rateCallback: (rating, done) => {

                rating = rating.toFixed(1);
                rating = parseFloat(rating);
                this.setRating(rating);

                wp.data.dispatch('core/editor').editPost(
                    { meta: { overall_rating: rating } }
                );

                I can't access setState here
                //this.setState({overallRating: rating});

                done();
            }
        })
    }
    />
)
}



//save it in higher scope
printDivOverallRater() {
    const self = this;
    return (
    <div id="overall-rater-panel" ref={()=>
        raterJs({
            starSize: 32,
            step: 0.1,
            showToolTip: false,
            rating: this.state.overallRating,
            readOnly: false,
            element: document.querySelector("#overall-rater-panel"),
            rateCallback: function(rating, done){

                rating = rating.toFixed(1);
                rating = parseFloat(rating);
                self.setRating(rating);

                wp.data.dispatch('core/editor').editPost(
                    { meta: { overall_rating: rating } }
                );

                I can't access setState here
                //this.setState({overallRating: rating});

                done();
            }
        })
    }
    />
)
}

在回调中使用它

Use this in a callback

bind

callback

this

reactjs