javascript - 在React的onClick事件中重置输入值

This question already has answers here:

Unable to access React instance (this) inside event handler
                                
                                    （19个回答）
                                
                        
                5个月前关闭。
            
        

我知道这很简单，但对我来说却很少混淆：(

为什么在以下情况下输入值未重置。

handleReset() {
  this.setState({ data: "" });
}

<button onClick={this.handleReset}>Reset</button>

但是，当我在onClick事件中使用内联方式时，我可以重设输入值。

<button onClick={()=>{ this.setState({ data: "" });}}>Reset</button>

我使用CodePen创建了一个工作示例。谁能指导我做错了什么。

最佳答案

您需要将handleReset()函数绑定到该类或使用箭头函数。 this的范围否则更改。

尝试使用箭头功能（绑定范围）：

handleReset = () => {
  this.setState({ data: "" });
}

另外5个示例位于：
https://www.freecodecamp.org/news/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56/

更新：

自动将方法绑定到其类实例的小型库。
https://www.npmjs.com/package/auto-bind

关于javascript - 在React的onClick事件中重置输入值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58720817/