时间戳

首页 > 解决方案 > 单击组件时onClick未触发

javascript - 单击组件时onClick未触发

问题描述

一个很好的话题，但是当点击组件时我的事件句柄没有被触发并且看不到出了什么问题。有任何想法吗？它与通过数组元素的映射有关吗？

function App() {

  const [fileTree, setFileTree] = useState(null);

  useEffect(() => {
    const data = getFileTree();
    setFileTree(data)
  }, []);

  const handleClick = () => {
    console.log('clicked')
  }

  const mapThroughTreeItem = () => {
    return fileTree.root.map((el, i) => <FileTreeItem
      item={el}
      key={i}
      onClick={handleClick}
    />)
  }

  if (fileTree) {
    return (
      <>
        {mapThroughTreeItem()}
      </>
    );
  } else {
    return (
      <>
        Loading..
    </>
    );
  }
}

export default App;

标签： javascriptreactjs

解决方案

FileTreeItem 似乎是一个自定义元素，您如何处理该组件内的点击事件？

你可能应该有类似的东西

function FileTreeItem({onClick}) {
    return (
        <div onClick={onClick}></div>
    )
}

您不能直接在自定义元素上注册事件，因为它们将在 DOM 中被它们的渲染实现完全替换。

推荐阅读