在 Render 函数 React js 中编写内联函数方法与普通方法之间的区别

Posted 2023-02-21

【中文标题】在 Render 函数 React js 中编写内联函数方法与普通方法之间的区别

【英文标题】：Difference between writing inline function methods vs normal method inside Render function React js

【发布时间】：2021-01-06 03:01:25

【问题描述】：

我发现在调用按钮的 onClick 函数和将参数传递给渲染内部的方法之间存在难以理解的区别，我的问题是为什么我们使用 <button onClick=this.handleClick>Click</button> 与 <button onClick=()=>this.handleClick(argument)>Click</button> 内部使用箭头是什么意思，我知道这表明一个函数，在循环时我想发送我只能使用<button onClick=()=>this.handleClick(argument)>Click</button> 方法但我能够使用<button onClick=this.handleClick>Click</button> 方法来完成的参数，有人可以解释一下这些差异。

 handleDel = (id) => 
    this.setState( todo: this.state.todo.filter((item) => item.id !== id) );
  ;

以及为什么我们除了绑定之外再次使用上面的箭头函数方法，因为我在声明 onclick <button onClick=()=>this.handleClick(argument)>Click</button> 时已经使用过，我们不能像这样传递参数<button onClick=(para)=>this.handleClick(argument)>Click</button> 而不是

 handleDel = (id) => 
   
  ;

【问题讨论】：

这能回答你的问题吗？ How to decide when to pass parameter & when not

该链接清楚地解释了如何传递参数和参数，但为什么我们在 onClick this.handleClick(argument)>Click vs Click 我想知道这两者的区别

这是箭头函数的语法。在尝试在顶部添加 JSX 和 React API 之前，您应该通过基本的 ES6 教程。

【参考方案1】：

在 React 中，我们需要传递一个函数作为事件处理程序，请参考here 了解更多关于在 React 中处理事件的信息。因此，在任何一种情况下，我们都传递了一个函数，但略有不同。

当您不想向事件处理函数发送任何自定义参数时，我们使用<button onClick=this.handleClick>Click</button>。这种方式默认event对象被发送到处理程序，可以根据需要使用。

const handleClick = (event) =>  ..... 

//....some code
<button onClick=this.handleClick>Click</button>

但是当您想向处理函数发送一些参数时，我们会将实际的事件处理程序包装在一个匿名函数中，例如() => this.handleClick(argument)。

const handleClick = (data) =>  ..... 

//....some code
<button onClick=() => this.handleClick(argument)>Click</button>

除了参数，如果我们想传递事件对象，那么我们可以像下面那样做

const handleClick = (event, data) =>  ..... 

//....some code
<button onClick=(e) => this.handleClick(e, argument)>Click</button>