获取菜单项物料界面取值 [英] Get value of MenuItem material ui

问题描述

我使用Material UI表示菜单和菜单项。 我正在尝试获取菜单项的值，但不起作用。

这是我的代码：

<Menu value= { this.state.selectedItem }>
  <MenuItem onClick={this.listClicked} 
    leftIcon={
      <FontIcon 
        className="material-icons"
        style={{ color: 'white', margin: '0' }}>
          format_list_bulleted
      </FontIcon>
    }
  />     
  <MenuItem onClick={this.settingClicked} 
    leftIcon={
      <FontIcon 
        className="material-icons"
        style={{ color: 'white', margin: '0' }}>
          settings
      </FontIcon>
    } 
  />
</Menu>

public listClicked = (value) => {
  this.setState({
    selectedItem :value
  })
  console.log(this.state.selectedItem)
}

我没有获取该值，并且在导航器的控制台中有一个对象。

你能帮我吗？

谢谢

推荐答案

在菜单项上使用data-attribute，并从单击事件的currentTarget访问它。请注意，data-my-value属性在event.currentTarget.dataset上变为myValue。

const handleClick = event => {
    const { myValue } = event.currentTarget.dataset;
    console.log(myValue) // --> 123
}

<MenuItem
    data-my-value={123}
    onClick={handleClick}
>
    <div>text</div>
</MenuItem>

为什么currentTarget而不是target？ currentTarget是指事件监听器直接附加到的元素，而target是指MenuItem内被点击的特定元素，比如一些div。该div没有data-my-value属性，因此target在其dataset上不会有myValue。因此在本例中使用currentTarget。

相关：How to access custom attributes from event object in React?

这篇关于获取菜单项物料界面取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！