如何显示通过Material UI React选择了菜单列表中的哪个项目？

Question

我正在尝试根据将selected属性设置为true或false来动态设置菜单列表项的样式。

我正在尝试使用onClick方法并读取event.target.name ，更改每个菜单项提供的value的状态，然后最终使用selected prop来检查该值是true还是false。 由于某些原因，它没有选择我尝试登录的event.taget.name 。

上方渲染：

constructor(props) {
  super(props);
  this.state = { 
    notFound: false,
    value: false,
    anchorEl: null,
    industry: ''
  };
}

handleIndustriesSelect = event => {
  this.setState({ [event.target.name]: event.target.value });
  console.log('target',event.target.name)
  this.handleIndustriesClose()
}

下方渲染

<Menu
  id="industries-menu"
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={this.handleIndustriesClose}
  MenuListProps={{
    name: 'industry'
  }}
>
  <MenuItem value={'aerospace'} selected={this.state.industry === 'aerospace'} onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/aerospace'>Aerospace</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/automotive'>Automotive</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/energy'>Energy</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/industrial'>Industrial</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/marine'>Marine</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/medical-technologies'>Medical Technologies</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/tool-manufacturers'>Tool Manufacturers</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/mixed-parts'>Mixed Parts</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/watch'>Watch</MenuItem>
</Menu>

Answer 1

您不能使用state来选择菜单项，因为每次单击菜单项时都不会保留状态。 当您单击菜单项时，应该更改url，组件将重新呈现。

因此解决方案是检查当前位置（URL）是否与菜单项的目标URL相匹配。 如果匹配，则菜单项的selected属性应为true。 为了获得当前位置作为组件中的道具，您将需要使用react-router withRouter HOC。

这是验证其工作原理的完整代码。 https://codesandbox.io/s/j432ox8255

 import React from 'react'; import { Link} from 'react-router-dom'; import { withRouter } from 'react-router' import Button from '@material-ui/core/Button'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; class SimpleMenu extends React.Component { state = { notFound: false, value: false, anchorEl: null, }; handleIndustriesOpen = event => { this.setState({ anchorEl: event.currentTarget }); }; handleIndustriesClose = () => { this.setState({ anchorEl: null }); }; render() { const { location: { pathname } } = this.props; const { anchorEl } = this.state; return ( <div> <Button aria-owns={anchorEl ? 'industries-menu' : null} aria-haspopup="true" onClick={this.handleIndustriesOpen} > Open Menu </Button> <Menu id="industries-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={this.handleIndustriesClose} MenuListProps={{ name: 'industry' }} > <MenuItem selected={pathname === '/home/industry/aerospace'} onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/aerospace'>Aerospace</MenuItem> <MenuItem selected={pathname === '/home/industry/automotive'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/automotive'>Automotive</MenuItem> <MenuItem selected={pathname === '/home/industry/energy'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/energy'>Energy</MenuItem> <MenuItem selected={pathname === '/home/industry/industrial'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/industrial'>Industrial</MenuItem> <MenuItem selected={pathname === '/home/industry/marine'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/marine'>Marine</MenuItem> <MenuItem selected={pathname === '/home/industry/medical-technologies'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/medical-technologies'>Medical Technologies</MenuItem> <MenuItem selected={pathname === '/home/industry/tool-manufacturers'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/tool-manufacturers'>Tool Manufacturers</MenuItem> <MenuItem selected={pathname === '/home/industry/mixed-parts'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/mixed-parts'>Mixed Parts</MenuItem> <MenuItem selected={pathname === '/home/industry/watch'} onClick={this.handleIndustriesClose} component={Link} to='/home/industry/watch'>Watch</MenuItem> </Menu> </div> ); } } export default withRouter(SimpleMenu); 

Answer 2

您需要在每个MenuItem上显式设置name 。

MenuListProps确实仅适用于内部MenuList组件，不适用于MenuItem 。

...

但是，在您的情况下，我不使用名称prop，只需在setState直接设置它即可：

handleIndustriesSelect = event => {
  this.setState({ industry: event.target.value });

...

另外，看起来e.target.value也是undefined ，如果对您来说确实如此，那么您也必须传递value属性，这是过度复杂的标志。