在 React 中，如果你写 onClick = "this.function()"，为什么会在组件加载时立即执行函数

在 React 中，如果你写了 onClick = "this.function()"，这会在组件加载时立即执行该函数，因为它相当于在组件的 HTML 元素上直接执行该函数，而不是当点击事件发生时才调用该函数。

正确的方法是将函数作为事件处理程序绑定到组件：

<button onClick={this.function}>Click me</button>

或使用箭头函数：

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

这样，当点击按钮时，才会执行该函数。

相关问题

在 React 中，如果你写了 onClick = "this.function()"，这会在组件加载时立即执行该函数，为什么它相当于在组件的 HTML 元素上直接执行该函数？

在这种写法中，您将字符串 "this.function()" 直接传递给 onClick 属性。这意味着，在组件加载时，JavaScript 将立即评估该字符串，并执行函数。

这与在 HTML 元素上直接执行函数类似，因为它在组件加载时立即执行，而不是在点击事件发生时才执行。

与此相反，正确的方法是将函数作为 onClick 的值传递，例如：

onClick={this.function}

这样，函数将在点击事件发生时才执行，而不是在组件加载时。

react中onclick=”this.function”，前面为什么需要加this？

在 React 中，使用 `this` 来访问当前组件的实例。当使用箭头函数作为事件处理函数时，不需要使用 `this`。但是，使用普通函数作为事件处理函数时，需要使用 `this` 来访问组件的实例，以便访问组件的状态和其他方法。

例如：

class Example extends React.Component {
  handleClick() {
    console.log('Button was clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

如果不使用 `this`，则会抛出错误：

Uncaught TypeError: this.handleClick is not a function