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

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

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

Answer 2

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

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

请尝试这样。

Answer 3

在JavaScript中使用名为<MenuItem onClick={this.closeDrawer("ProductPage")}> Products </MenuItem>

的功能

这是菜单

closeDrawer = key => event => {
    console.log("=> closeDrawer key", key);
    this.setState({ open: false });
  };

这是处理程序

=> closeDrawer key ProductPage

然后你会在JavaScript控制台中看到类似下面的东西

gcloud

Answer 4

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

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

你也可以得到像这样的价值

<MenuItem key={menu.id} primaryText={menuItem.name} onClick = {this.onClickButton} menuItems = {this.subMenu(menuItem.children)}/>

然后像这样onClickButton

onClickButton = (ev) => {
      if(ev.target.innerText === 'light') { // light is the value of menuitem in string
        this.props.dispatch(changeTheme('light'))
      } 
    }

Answer 6

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

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

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

同时将console.log作为回调移动，只有在state更改发生后才会调用它。

Answer 8

onClick未指定为MenuItem的属性，您可以在Menu上放置onChange并获取所选项目的值，如

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

            <MenuItem leftIcon={
                <FontIcon className="material-icons" style={{ color: 'white', margin: '0' }}>settings</FontIcon>
            } />

        </Menu>


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

Answer 9

在菜单项上使用data-attribute，然后从单击事件的目标位置访问它。请注意，data-my-value属性在myValue上变成event.target.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？ currentTarget引用事件侦听器直接附加到的元素，而target引用被单击的MenuItem中的特定元素，例如某些div。该div没有data-my-value属性，因此target的{{1}}上没有myValue。因此，在这种情况下，请使用dataset。

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

Answer 10

向 MenuItem 组件添加“值”属性。然后使用getAttribute（）函数获取'value'属性的值。这是一个例子...

const someMenu = () => {
    const [element, setElement] = React.useState(null)

    const handleClose = event => {
       setElement(null)

       // grab the value of the "value" attribute here
       console.log(event.target.getAttribute("value")
    }

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

    return(
        <Menu anchorEl={element} keepMounted open={Boolean(element)}>
            <MenuItem value="foo" onClick={handle} />
        </Menu>
    )
}

获取MenuItem材质的价值ui

10 个答案: