在 React 中,如果你写了 onClick = "this.function()",这会在组件加载时立即执行该函数,为什么它相当于在组件的 HTML 元素上直接执行该函数?
时间: 2023-02-20 18:23:11 浏览: 54
在这种写法中,您将字符串 "this.function()" 直接传递给 onClick 属性。这意味着,在组件加载时,JavaScript 将立即评估该字符串,并执行函数。
这与在 HTML 元素上直接执行函数类似,因为它在组件加载时立即执行,而不是在点击事件发生时才执行。
与此相反,正确的方法是将函数作为 onClick 的值传递,例如:
onClick={this.function}
这样,函数将在点击事件发生时才执行,而不是在组件加载时。
相关问题
在 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”,function后面为什么不能加(),好像一加()就会自动执行
在 React 中,如果你写 `onClick = "this.function()"`,它会在组件加载时立即执行函数,而不是等到点击按钮时再执行。
因此,React 中的事件处理函数通常是以箭头函数的形式写在 `onClick` 属性中,例如:
```
<button onClick={() => this.function()}>Click me</button>
```
这样,当点击按钮时,函数才会被执行。