获取MenuItem材质ui的值

Question

我正在为菜单和菜单项使用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)
}

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

你能帮助我吗？

谢谢

Answer 1

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

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？ ThecurrentTarget指的是事件侦听器直接附加到的元素，而target指的是 MenuItem 中的特定元素，例如 some div，即被单击的元素。该分区不具有data-my-value的属性，因此将target不会有myValue它dataset。所以currentTarget在这种情况下使用。

相关：如何从 React 中的事件对象访问自定义属性？

Answer 2

在 Material UIMenu组件中，选择菜单项时的触发函数最好使用onChange父Menu组件的onClick处理程序而不是每个单独项目的处理程序来完成。onChange回调的签名是function(event: object, value: any) => void，因此您可以为每个MenuItemsa 提供单独的value道具，这将作为onChange处理程序中的第二个参数提供。像这样：

<Menu value= { this.state.selectedItem } onChange={ this.menuClicked }>
  <MenuItem value="list" leftIcon={
    <FontIcon className="material-icons">format_list_bulleted</FontIcon>
  } />     
  <MenuItem value="settings" leftIcon={
    <FontIcon className="material-icons">settings</FontIcon>
  } />
</Menu>

...

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

Answer 3

尝试e.target.innerText一下MenuItem onClick。

const Menu = () => {
    const [anchorEl, setAnchorEl] = useState(null)

    const handleClick = event => {
        setAnchorEl(event.currentTarget)
    }

    const handleClose = e => {
        console.log(e.target.innerText) // => This logs menu item text.
        setAnchorEl(null)
    }

    return (
        <div>
            <Button onClick={handleClick}>Open Menu</Button>
            <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
        </div>
    )
}

Answer 4

Menu没有在API中定义onChange，并且它对我不起作用，因为它从未被调用。对我有用的是一个丑陋的解决方案：

<MenuItem onClick={this.handleClose.bind(this, 'valueHere')}>Text here</MenuItem>

Answer 5

我使用了 NativeEvent，它对我有用。

handleClose = (ev) => {
        this.setState({
            anchorEl: null
        });
        console.log(ev.nativeEvent.target.outerText);
    };

请尝试这样。

Answer 6

传递给处理程序的参数onClick不是。您必须从事件中提取 。eventvaluevalue

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

还可以将 移动console.log为回调，因为只有在state发生更改后才会调用它。