javascript - 在 slider 事件状态上设置状态不是函数错误

Question

我试图在更新 slider 时更改状态。 不知怎的，setState is not a function出现错误:

“类型错误:this.setState 不是一个函数”

我是 react 新手，我可能还没有意识到如何使用状态。

var ReactDOM = require('react-dom');
var React = require('react');
var SliderComponent = require('rc-slider');

class Slider extends React.Component {
constructor(props) {
    super(props);
    console.log("SLIDER");
    console.log(props);
    this.state = {
        value: 50,
    };

}
onSliderChange(value){
    console.log(value);
    this.setState({
        value: value
    });
}
render() {
    return (<div> SLider
        <SliderComponent value={this.state.value} tipTransitionName="rc-slider-tooltip-zoom-down" onChange={this.onSliderChange} />
    </div>)
}
}

module.exports = Slider;

Answer 1

您需要将this绑定(bind)到onSliderChange函数。

<SliderComponent value={this.state.value} tipTransitionName="rc-slider-tooltip-zoom-down" onChange={this.onSliderChange.bind(this)} />

您也可以在构造函数中执行此操作。

constructor(props) {
    super(props);
    console.log("SLIDER");
    console.log(props);
    this.state = {
        value: 50,
    };
    this.onSliderChange = this.onSliderChange.bind(this)
}

还有很多其他方法可以做到这一点。

https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56