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

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;

最佳答案

FileTreeItem似乎是一个自定义元素,您如何处理此组件内的click事件?

你可能应该有类似

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


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

关于javascript - 单击组件时,onClick不触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57289994/

10-08 22:47
查看更多