如何在reactjs中的ul，li或div中触发click事件

Question

我试图在reactjs组件中触发click事件，但它无法正常工作。我在div，ul，li甚至是一个按钮上试过这个都没有成功。我有一个演示here

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

Answer 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的值，因此在Hi上看到console

Answer 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"));