javascript - 如何使用 Material UI React 显示菜单列表中的哪个项目被选中？

Question

我正在尝试根据将selected道具设置为真或假来动态设置菜单列表项的样式。

我正在尝试使用该onClick方法并读取event.target.name，更改value每个菜单项提供的状态，然后最后使用selected道具检查该值是真还是假。出于某种原因，它没有收到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>

标签： javascriptreactjsmaterial-ui

Answer 1

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

所以解决方案是检查当前位置（url）是否与菜单项的目标url匹配。如果匹配，则selected菜单项的 prop 应为 true。为了在组件中获取当前位置作为道具，您需要withRouter使用react-router.

这是验证其工作原理的完整代码。 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);