Question

一个很好的主题，但是单击该组件时未触发我的事件句柄，看不到出了什么问题。有任何想法吗？与通过数组元素进行映射有关吗？

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;

Answer 1

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

您可能应该拥有

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

您不能直接在自定义元素上注册事件，因为事件在DOM中将由其呈现实现完全替换。

单击组件时，onClick不触发

1 个答案: