onClick function 在渲染时被调用——我怎样才能阻止这种情况的发生？

Question

React 组件不应在每次渲染时调用 function。 为什么在我的情况下它会在渲染时被调用？

前任。）

const onClick = () => {
    console.log('hi');
}

<button onClick={onClick}>CLICK</button>

我想知道当有上面这样的代码时，onClick function 在哪里被调用。

Answer 1

就像 HTML 一样，React 可以根据用户事件执行操作。 HTML 事件可以是浏览器执行的操作，也可以是用户执行的操作。 例如，单击按钮、将鼠标悬停在图像上等。

onClick只是众多事件处理程序之一，并在用户单击相关元素时执行。

语法 b/w HTML 和 JSX 的区别：react/JSX 中的onClick={shoot}和 HTML 中的onClick="shoot()" 。

1. 我建议阅读有关Javascript Events的内容。
2. 您似乎有兴趣了解 react 事件的内部工作，因此您可以参考 react 网站上的SyntheticEvent文档。

Answer 2

我在开始使用 React 时遇到了同样的问题，解决方法是在 onClick 之前添加一个箭头 function：

    const onClick = () => {
    console.log('hi');
}

    return(
    <button onClick={() => onClick()}>CLICK</button>
)