如何在 reactjs 中的 ul、li 或 div 中触发点击事件

【问题标题】：How to fire a click event in a ul, li or div in reactjs如何在 reactjs 中的 ul、li 或 div 中触发点击事件
【发布时间】：2018-02-28 12:31:50
【问题描述】：

我正在尝试在 reactjs 组件中触发单击事件，但它不起作用。我在div、ul、li 甚至是一个按钮中都尝试过，但没有成功。我有一个演示here

我看过this question，但问题不是我面临的问题，如上面的演示所示

【问题讨论】：

onClick 期待一个函数，使用这个：onClick={() => console.log("Hi")}

标签： reactjs jsx

【解决方案1】：

onClick 接受是一个函数，并且会写成

<button onClick={() => {console.log("Hi")}}>Hello</button>

或

handleClick() {
    console.log('Hi');
}
<button onClick={this.handleClick}>Hello</button>

而不是

<button onClick={console.log("Hi")}>Hello</button>

如果您写 onClick={console.log("Hi")} ，则在每个 render 上都会评估 onClick 的值，因此在 console 上可以看到 Hi

【讨论】：

【解决方案2】：

您应该在事件处理程序中提供一个函数，而不是调用该函数。见：

import React from "react";
import { render } from "react-dom";

const App = () => (
  <div>
    <div>
      <button onClick={() => {console.log("Hi")}}>Hello</button>
    </div>
  </div>
);

render(<App />, document.getElementById("root"));

【讨论】：