在滑块事件状态上设置状态不是函数错误答案

【问题标题】：set state on slider event state is not a function error在滑块事件状态上设置状态不是函数错误
【发布时间】：2017-10-03 16:58:10
【问题描述】：

我正在尝试在更新滑块时更改状态。不知何故出现 setState is not a function 错误：

"TypeError: this.setState 不是函数"

我是新来的反应，我可能还没有确切地意识到如何使用状态。

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;

【问题讨论】：

标签： javascript reactjs setstate

【解决方案1】：

您需要将 this 绑定到 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

【讨论】：