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

Question

我试图改变我更新滑块时的状态。 不知何故的setState不出现功能错误：

“类型错误：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; 

Answer 1

您需要绑定这个到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