除非刷新页面，否则“重置”按钮将不起作用，否则会给我一个错误（React.JS）

Question

所以我在 React.JS 中工作，我正在尝试制作类似于输入字段的东西，用户可以在其中输入他们选择的数字，它会显示在文本中。

我决定添加一个“重置为零”按钮作为扩展。

             <div>
                Count: {this.state.value}
                <form>
                <input type="number" value = {this.state.value} onChange = {this.inputChange}/>
                <br/>
                <button onClick = {this.reset}>reset to zero</button>
                </form>     
            </div>          

它可以工作，但每次它都会刷新页面。

我在线阅读，我决定将“type = button”添加到我的按钮中：

<button type="button" onClick = {this.reset}>reset to zero</button>

当我再次运行我的代码时，它仍然会正常增加，但是当我单击按钮时，什么也没有发生，当我尝试再次增加它时，我收到一个错误，“TypeError: this.setState is not a function”。

错误来自此方法：

inputChange = event => {
        this.setState ({value: event.target.value})
    }

我知道错误来自哪里，但我不知道它为什么会发生，或者如何解决它（请注意，我也是 JavaScript 和 React.JS 的初学者）

我希望有一个人可以帮助我。

这是我的完整代码，供参考。

class Slider extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            value: 0
        }
    }
    inputChange = event => {
        this.setState ({value: event.target.value})
    }
    reset = () => {
        this.setState = ({
            count: 0
        })
    }
    render() {
        return (
            <div>
                Count: {this.state.value}
                <form>
                <input type="number" value = {this.state.value} onChange = {this.inputChange}/>
                <br/>
                <button type = "button"onClick = {this.reset}>reset to zero</button>
                </form>     
            </div>

        );
    }
}

谢谢各位，提前。

Answer 1

重置时没有任何反应并且您在输入更改时收到该错误的原因是您在重置this.setState中重新分配 this.setState 而不是调用它。 此外，您正在设置count而不是value ，这将导致设置错误的 state 。

这就是您的重置 function 应该是：

reset = () => {
    this.setState ({
        value: 0
    })
}

当您调用this.setState时，React 将使用新的 state 在您的组件中触发重新渲染。

当您单击重置时，目前没有发生这种情况。 在您随后调用 inputChange 时， this.setState已被重新分配为 object，并且不再可调用，从而引发该错误。

Answer 2

尝试像这样替换您的按钮：

<button type = "button"onClick = {this.reset.bind(this)}>reset to zero</button>

这将强制this方法执行为 scope。