Question

我正在使用ReactJS中的无序列表构建菜单。我在li上附加了click事件处理程序，如下所示：

const menuItems = sidebarItems.mainItems.map((item) => {
    if (item.subitems.length > 0) {
        return (
            <li onClick={this.showSubmenu.bind(this)}>
                <span>{item.name}</span>
            </li>
        )
    }
});

但是当我的函数showSubmenu（e）被调用时，当我得到e.target时，我得到的元素是span而不是li。因为我将事件处理程序附加到li，所以我想我会得到li。

如何通过此方法获取li？我不想使用jquery将事件处理程序附加到每个li。

Answer 1

只需从事件处理程序中删除bind：

＆＃13;

class Menu extends React.Component {
  constructor() {
    super()
    
    this.state = {
      items: [{ name: 'Item 1' }, { name: 'Item 2' }]
    }

    this.showSubmenu = this.showSubmenu.bind(this) 
  }
  
  showSubmenu(event) {
    alert(event.target.tagName)
  }
  
  render() {
    const { items } = this.state
    
    return (
      <ul>
        {items.map((item, index) =>
          <li
            key={index}
            onClick={this.showSubmenu}
          >
            {item.name}
          </li>
        )}
      </ul>
    )
  }
}

ReactDOM.render(<Menu />, document.getElementById('root'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

如何在ReactJS中获取附加处理程序的元素？

1 个答案: