在reactjs事件处理中传递{SomeFunction}和{SomeFunction}之间的区别

问题描述

import React from "react";

const FunctionClick = () => {
  const clickHandler = () => {
  console.log("Button clicked.");
  };

  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  );
};

export default FunctionClick;

{反应NOOBIE警报} 在上面的代码中，我可以看到

的输出差异

<button onClick={clickHandler}>Click</button>

和

<button onClick={clickHandler()}>Click</button>

但是有人可以解释为什么我们传递函数而不调用它吗？

即使我们想在单击按钮时调用页面，在页面加载时如何调用该函数（第二代码）。

解决方法

您正在传递函数（对象）引用，直到您显式调用它为止，因为在onClick中，并且在单击事件发生时，单击时会调用该函数。

<button onClick={clickHandler}>Click</button>

这里您正在传递clickHandler的返回值，现在取决于您从clickHandler返回的值/对象，因为onClick in react期望调用函数引用，因此您必须从clickHandler返回一个函数，否则将引发错误。

<button onClick={clickHandler()}>Click</button>

与括号一起使用时，每次呈现页面时都会调用该函数，但是如果没有括号，则在单击时会调用

a = np.arange(0.5,-0.01,-0.01)
for i in range(len(a)):
    first_element = round(a[i],2) # this is the 1st element,rounded to 2 digit
    for j in range(i,len(a)):
        second_element = round(a[j],2) # same with 2nd element
        print(first_element,second_element) # you can replace this with your function

或

 import React,{ Component } from 'react';

class sample extends React.Component {
constructor(props) {
        super(props)


       this.clickHandler=this.clickHandler.bind(this);

}
 clickHandler() {
  console.log("Button clicked.");
  };
 render() {
  return (
    <div>
      <button onClick={this.clickHandler}>Click</button>
    </div>
  );
};
}
export default FunctionClick;

输入您的代码

    <button onClick={() => this.clickHandler()}>
 Click
      </button>

您的代码中的错误是，没有提供onClick功能。

<button onClick={clickHandler()}>Click</button> - This is not correct,here we are executing the clickHandler function.

相反，（当明确要将参数传递给函数时）这样做

<button onClick={(e) => {clickHandler(e)}}>Click</button>

javascript reactjs reactjs