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

Question

我发现调用按钮的 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) => {
   
  };

Answer 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>

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

Difference between writing inline function methods vs normal method inside Render function React js

reactjs

arrow-functions