除非刷新頁面，否則“重置”按鈕將不起作用，否則會給我一個錯誤（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。