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

Question

我在反应组件中有这个简单的代码：

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，你可以使用箭头函数或者在render中绑定，这不是最正确的方法

<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 >

Answer 2

event.target 给出了一个li 元素，因为浏览器使用的是 DOM，而不是 React 保存在内存中的虚拟结构。

呈现的页面上没有MenuItem 元素。取而代之的是由MenuItems 渲染的元素。

点击事件来自实际的 DOM 元素，例如 div、input、li。为什么不来自 MenuItem？因为页面上没有<MenuItem>。当你点击元素时，你点击的是<li>s，而不是<MenuItem>s。

您想要做的可以通过在 virtual <MenuItem> 上设置一个“虚构的”点击处理程序来实现：

<VirtualElement onClick={virtualClickHandler} />

然后，在渲染 real DOM 元素 <li> 时，VirtualElement 会在其上设置一个 real 点击处理程序：

class VirtualElement {
    realClickHandler (e) { // Let's assume you've bound this in the constructor
        // do stuff with "e" and "this.props"
    }
    render () {
        return <li onClick={realClickHandler} />
    }
}

现在，realClickHandler 的范围包含 this 和 e。这意味着，它可以读取 VirtualElements 和 event 对象的状态和（虚拟）道具。

最后一部分 - 唯一剩下的是virtualClickHandler。它住在哪里？在this.props。因为之前你说<VirtualElement onClick={virtualClickHandler} />，这个onClick 处理程序被写入VirtualElement 的props 对象。

您要做的是从 realClickHandler 调用 virtualClickHandler，它会同时看到 event 和 this em> 对象：

realClickHandler (e) {
    // Here you can tell the virtualClickHandler whatever it needs to know:
    this.props.onClick({
        event: e,
        key: this.props.key
    });
}

Answer 3

你可以这样做：

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

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