React中TreeView组件OnClick事件通过props传递未触发问题

问题核心原因 #

你的代码存在两个关键错误：

1. Props属性名不匹配：父组件传递的是onClick属性，但子组件里错误地访问props.handleItemClick，名称完全不对应，导致事件无法绑定。
2. TreeItem事件API误用：若你使用的是Material UI的TreeItem组件，它的节点点击事件并非标准onClick，而是专用的onNodeClick，用标准onClick会被组件内部逻辑拦截，无法触发。

修正方案 #

步骤1：统一Props属性名 #

先修正父子组件的props名称匹配问题：

TrackerStudent.js（父组件）

function TrackerStudent() {
  function handleItemClick(e) {
    console.log("Item Clicked >> " + e);
  }

  return (
    <>        
      <TreeViewTracker onClick={handleItemClick} />        
    </>
  );
}

export default TrackerStudent;

TreeViewTracker.js（子组件）

将props.handleItemClick改为props.onClick：

function TreeViewTracker(props) {
  return (
    <TreeView>
      {/* ...其他TreeItem节点 */}
      <TreeItem onClick={props.onClick} />
      {/* ...其他TreeItem节点 */}
    </TreeView>
  );
}

export default TreeViewTracker;

步骤2：替换为TreeItem专用事件（关键） #

如果使用的是Material UI的TreeItem组件，必须替换为onNodeClick才能正确触发点击事件：

TreeViewTracker.js 最终修改版

function TreeViewTracker(props) {
  return (
    <TreeView>
      {/* ...其他TreeItem节点 */}
      <TreeItem onNodeClick={props.onClick} />
      {/* ...其他TreeItem节点 */}
    </TreeView>
  );
}

export default TreeViewTracker;

额外优化（可选） #

若需要获取点击节点的具体信息，可修改父组件的回调函数接收节点参数：

// 父组件的handleItemClick
function handleItemClick(event, nodeId) {
  console.log("点击的节点ID：", nodeId);
}

内容的提问来源于stack exchange，提问作者Technology 2023