时间戳

首页 > 解决方案 > react如何处理传递给事件处理程序的函数/回调？

javascript - react如何处理传递给事件处理程序的函数/回调？

问题描述

我查找了有关此特定问题的不同博客/文档，我了解如何在渲染函数中使用方法之前需要对其进行绑定，但是文档未能详细解释一些事情，函数可以使用不同的方式传递给事件处理程序的是：

// call a already bound funciton
<button onClick={this.sayHello}>
  Click me!
</button>

// bind in place 
<button onClick={this.sayHello.bind(this)}>
  Click me!
</button>

// use es6 arrow functions
<button onClick={() => alert('hello'))}>
  Click me!
</button>

反应文档说推荐的方法是绑定一个函数，否则该函数将为组件的每个渲染调用，并且可能会弄乱事情。

但是我找不到为什么每次渲染都会调用它。

但是它不会只有在单击时才被调用吗？

或者

onClick 如何处理或执行 food 下传递的函数？

标签： javascriptreactjsdom-events

解决方案

React 使用合成事件。如果您使用的是基于类的组件，则需要将函数范围绑定到 class (only when we do not use arrow functions in our class)，否则this关键字的范围会在该函数中丢失。这意味着如果将一个普通的 ES5 函数用作处理程序并且我们在其中使用this.setState()它，它将无法按预期工作。

如果你arrow function在你的类中使用作为处理函数，那么不需要将它绑定到类的范围，因为箭头函数的范围是它上面的一个执行上下文。

如果您使用的是功能组件。没有this可用的关键字，您直接调用函数（函数本身外部或内部的处理程序）

现在：让我解释一下语法：

语法 1：

   // call a already bound funciton
       <button onClick={this.sayHello}>
         Click me!
        </button>

sayHello您将在类 Component 中简单地使用名称（如下所示）的事件处理程序。

sayHello(){ ... }   // Binded in constructor by doing this.sayHello = this.sayHello.bind(this)

或者

sayHello = ()=>{}

当单击按钮时，将调用/调用处理程序。

语法 2：

// bind in place 
<button onClick={this.sayHello.bind(this)}>
  Click me!
</button>

这种语法是this在我们的处理函数sayHello中绑定关键字语法的另一种简单方法，原因与我在上面提到的相同。

语法 3：

// use es6 arrow functions 
<button onClick={() => sayHello('hello'))}>
  Click me!
</button>

每当我们想将参数传递给处理函数时，我们都会使用这种语法。因此，在这种情况下，当单击按钮时，我们的sayHello函数会获取一个值“hello”作为参数。

你最后的怀疑：当 React 文档说该函数将在每次渲染组件时调用，并且可能会弄乱事情。它们的意思是，如果您在使用()=>{}语法的元素内错误地使用事件处理程序并且还在其中使用 a this.setState()，它将强制重新渲染。因为这就是setState()重新渲染我们的组件。当它到达同一行代码时，它会再次重新渲染，这最终会破坏我们的应用程序。

推荐阅读