Question

将点击监听器附加到通过地图渲染的组件

2019-04-13

44

javascript reactjs

我正在使用 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>
  );
};

工作示例。