Reactjs 在回调中使用此选项

我已经读过了，这应该更适合我的需要

但是，我还是不明白重点

我有这个密码

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>

    );
}

类划分总体上扩展了React.Component{
建造师（道具）{
超级（道具）；
让OverallingMeta=wp.data.select（'core/editor'）.getCurrentPost（）.meta.overall_rating；
this.state={overallRating:overallRatingMeta}；
this.printDivOverallRater=this.printDivOverallRater.bind（this）；
}
printDivOverallRater（）{
返回(
评级机构({
星号：32，
步骤：0.1，
showToolTip:false，
评级：本州总体评级，
只读：false，
元素：document.querySelector（“总体评分器面板”），
rateCallback：函数rateCallback（评级，完成）{
额定值=固定的额定值（1）；
评级=浮动（评级）；
这个。设定（额定值）；
wp.data.dispatch（'core/editor'）.editPost(
{meta:{总体评分：评分}
);
//我无法在这里访问setState
//this.setState（{overallRating:rating}）；
完成（）；
}
})
}
/>
)
}
渲染（）{
返回(
{这个。总的来说这个}
{this.printDivOverallRater（）}
);
}

但是，在回调函数中，我无法访问this.setState，因为这个现在指的是raterJS

---

如何更改回调中的状态？

将其保存在更高范围的use arrow函数中

// 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();
            }
        })
    }
    />
)
}

//箭头函数保留此
printDivOverallRater（）{
返回(
评级机构({
星号：32，
步骤：0.1，
showToolTip:false，
评级：本州总体评级，
只读：false，
元素：document.querySelector（“总体评分器面板”），
rateCallback：（评级，完成）=>{
额定值=固定的额定值（1）；
评级=浮动（评级）；
这个。设定（额定值）；
wp.data.dispatch（'core/editor'）.editPost(
{meta:{总体评分：评分}
);
我无法在这里访问setState
//this.setState（{overallRating:rating}）；
完成（）；
}
})
}
/>
)
}
//保存在更高的范围内
printDivOverallRater（）{
const self=这个；
返回(
评级机构({
星号：32，
步骤：0.1，
showToolTip:false，
评级：本州总体评级，
只读：false，
元素：document.querySelector（“总体评分器面板”），
rateCallback：函数（评级，完成）{
额定值=固定的额定值（1）；
评级=浮动（评级）；
自整定（额定值）；
wp.data.dispatch（'core/editor'）.editPost(
{meta:{总体评分：评分}
);
我无法在这里访问setState
//this.setState（{overallRating:rating}）；
完成（）；
}
})
}
/>
)
}