在React与MaterialUI中获取点击MenuItem的引用问题

这个问题其实是因为Material UI的MenuItem是封装过的React组件，点击事件的event.target会指向组件内部渲染的原生DOM元素（比如<li>或者里面的文本节点），而不是MenuItem组件实例，所以自然拿不到组件的key属性，也没法直接操作组件的selected状态。

给你几个实用的解决思路，按推荐程度排序：

1. 直接传递标识参数到点击事件（最推荐） #

不用依赖事件对象，直接把每个菜单项的标识（比如你的key值）作为参数传给点击处理函数，逻辑清晰还避免了DOM相关的问题：

render(){
  return(
    <List>
      <MenuItem 
        onClick={() => this.onItemClick(1)} 
        key={1}
        selected={this.state.selectedItem === 1}
      >Menu item 1</MenuItem>
      <MenuItem 
        onClick={() => this.onItemClick(2)} 
        key={2}
        selected={this.state.selectedItem === 2}
      >Menu item 2</MenuItem>
      <MenuItem 
        onClick={() => this.onItemClick(3)} 
        key={3}
        selected={this.state.selectedItem === 3}
      >Menu item 3</MenuItem>
    </List>
  )
}

onItemClick = (itemId) => {
  console.log('选中的菜单项ID:', itemId);
  // 更新父组件state，控制MenuItem的selected状态
  this.setState({ selectedItem: itemId });
}

这里顺便用了受控组件的方式管理选中状态：父组件维护selectedItem的状态，然后给每个MenuItem的selected属性赋值，这才是React推荐的状态管理方式，比直接操作组件实例要靠谱得多。

2. 使用event.currentTarget获取绑定事件的DOM元素 #

如果只是想拿到MenuItem渲染后的根DOM元素，可以用event.currentTarget代替event.target——currentTarget永远指向绑定事件的那个元素（也就是MenuItem对应的根DOM节点），不过要注意：React的key属性不会被渲染到DOM上，所以还是拿不到key值，这个方法更适合需要操作DOM的场景。

onItemClick = (event) => {
  console.log('MenuItem对应的根DOM元素:', event.currentTarget);
  // 但还是拿不到key，所以还是推荐第一种方法
}

3. 通过Ref获取组件实例（仅特殊场景使用） #

如果确实需要直接访问MenuItem组件实例，可以给每个组件加ref，但这种方法比较繁琐，除非有特殊需求（比如调用组件的内部方法）：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedItem: null };
    // 存储每个MenuItem的ref
    this.menuItemRefs = {};
  }

  render(){
    return(
      <List>
        <MenuItem 
          ref={el => this.menuItemRefs[1] = el}
          onClick={() => this.onItemClick(1)} 
          key={1}
          selected={this.state.selectedItem === 1}
        >Menu item 1</MenuItem>
        {/* 其他MenuItem同理 */}
      </List>
    )
  }

  onItemClick = (itemId) => {
    const targetMenuItem = this.menuItemRefs[itemId];
    console.log('MenuItem组件实例:', targetMenuItem);
    this.setState({ selectedItem: itemId });
  }
}

总结一下，优先用第一种方法，既解决了你的问题，又符合React的最佳实践，管理选中状态也更清晰。

内容的提问来源于stack exchange，提问作者Dany Dhondt