onClick 不一致

Question

我对 React 中的事件有疑问。 Link 到 sandbox。这是我的 index.js 文件。

import * as React from "react";
import ReactDOM from "react-dom";

function App() {
  const [x, setX] = React.useState(true);
  React.useEffect(() => {
    setTimeout(() => setX(false), 1000);
  }, []);
  return (
    <div
      onClick={
        x
          ? () => {
              console.log("Clicked");
            }
          : undefined
      }
    >
      Hello World
    </div>
  );
}

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

useEffect为运行后，onClick设置为undefined。

预计： 没有 click 事件附加到 div

实际： 有一个从 React DOM 生成的 noop 函数附加到 div。

Answer 1

Link 到 sandbox

import * as React from "react";
import ReactDOM from "react-dom";

function App() {
  const [x, setX] = React.useState(true);
  
  const toggle = () => { 
    setX (!x);
    console.log(x ? "clicked": "undefined");
  };

  return (
    <div>
      <div onClick={toggle}>Hello World</div>
      <div>{x ? "Im closed" : "Im open"}</div>
    </div>
         );
     }

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

onClick 不一致

onClick is not consistency

javascript

reactjs

mouseevent