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

为了获得点击的项目，您可以使用箭头功能或绑定渲染，这不是最正确的方法

<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元素。取而代之的是由MenuItem生成的元素。

Click事件来自div，input，li等实际DOM元素。为什么不从MenuItem？因为页面上没有<MenuItem>。点击元素后，点击<li> s，而不是<MenuItem> s。

通过设置＆＃34;虚构＆＃34;可以实现您想要做的事情。点击虚拟 <MenuItem>上的处理程序：

<VirtualElement onClick={virtualClickHandler} />

然后，在呈现真实DOM元素 <li>时，VirtualElement将在其上设置真正的点击处理程序：

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 和事件对象的道具。

最后一部分 - 唯一剩下的就是virtualClickHandler。它在哪里？在this.props。因为在前面说过<VirtualElement onClick={virtualClickHandler} />时，这个onClick处理程序会写在VirtualElement的props对象上。

您要做的是从 realClickHandler 调用 virtualClickHandler ，它会看到事件和 this object：

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); //???
}

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

3 个答案: