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

Question

我试图在更新滑块时更改状态。以某种方式出现 setState is not a function 错误：

"TypeError: this.setState is not a function"

我是 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 绑定到 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

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

set state on slider event state is not a function error

javascript

setstate

reactjs