reactjs - 使用 MaterialUI 和 React 获取对单击项目的引用

Question

我在 react 组件中有这个简单的代码:

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

onItemClick = (event) => {
    console.log(event, event.target, event.target.key); //???
}

当我单击列表项时，我想检索其引用以分配 selected该项目的属性。event.target给出 <li>对象而不是 <MenuItem>对象，所以event.target.key返回undefined

material-ui docs不幸的是，没有给出任何关于如何处理事件的解释。

我做错了什么？

Answer 1

为了获取单击的 Item，您可以使用箭头函数或在渲染中绑定(bind)，这不是最正确的方法

<MenuItem onClick={() => this.onItemClick(1)} key={1}>Menu item 1</MenuItem>

或者在 MenuItemClick 周围编写一个包装器，例如

class ExtendedMenuItem extends React.Component {
   onClick=() => {
        this.props.onClick(this.props.id);
   }
   render(){
      const {id, children, ...others} = this.props;
      return <MenuItem onClick={this.onClick} key={id} {...others}>children</MenuItem>
   }
}

然后像这样使用它

<ExtendedMenuItem onClick={this.onItemClick} id={1}>Menu item 1</ExtendedMenuItem >