javascript - 将点击监听器附加到通过 map 呈现的组件

Question

我正在使用 javascript 的 map 函数呈现一个列表，我想向该列表的元素添加点击监听器，但我可以这样做。

这是代码链接 - https://codesandbox.io/s/oqvvr1n3vq

每当单击 h1 标签 时，我想控制台记录 Hello。

Answer 1

onClick 期望一个函数(事件处理程序)，但您正在分配一个值，这意味着 console.log 将立即执行而无需单击任何标记。

解决方案是 - 在 Dummy 组件中创建一个函数并将该函数用作点击处理程序。

像这样:

onClick={() => console.log("Hello", props.display)}

或

const Dummy = props => {
  const handler = () => console.log("Hello", props.display);

  return (
    <h1 style={{ border: "1px solid black" }} onClick={handler}>
      {props.display}
    </h1>
  );
};

Working Example.