Javascript 如何显示菜单列表中的哪个项目是通过材质UI React选择的？

我正在尝试根据将

选定的

属性设置为true或false来动态设置菜单列表项的样式

我试图使用

onClick

方法读取

event.target.name

，更改每个菜单项提供的

值的状态，然后最后使用
selected
道具检查该值是否为真。出于某种原因，它没有拾取我试图记录的
事件.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>


航空航天
汽车
能量
工业的
海军陆战队
医疗技术
工具制造商
混合部分
监视
您需要在每个
菜单项上明确设置
名称

menulistrops
仅适用于内部
MenuList
组件，而不适用于
MenuItem
s

...
但是，在您的情况下，我不会使用name prop，只需直接在
setState
中设置它：

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

...
另外，它看起来像是
e.target.value
也是
未定义的
，如果对您来说是这样，那么您也必须传递
value
prop，这是过度复杂的标志。
您需要在每个
菜单项上显式设置
name

menulistrops
仅适用于内部
MenuList
组件，而不适用于
MenuItem
s

...
但是，在您的情况下，我不会使用name prop，只需直接在
setState
中设置它：

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

...
此外，它看起来像
e.target.value
也是
未定义的
，如果对您来说是这样，那么您也必须传递
value
prop，这是过度复杂的标志。
您不能使用
state
来选择菜单项，因为每次单击菜单项时都不会保留状态。
当您单击菜单项时，应该更改url，组件将重新呈现

因此，解决方案是检查当前位置（url）是否与菜单项的目标url匹配。如果匹配，所选菜单项的
属性应为true。为了获取组件中的当前位置作为道具，您需要使用
with router
HOC of
react router

下面是一个完整的代码来验证它是如何工作的。
从“React”导入React；
从'react router dom'导入{Link}；
从“react router”导入{withRouter}
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
类SimpleMu扩展了React.Component{
状态={
notFound:错误，
值：false，
主持人：空，
};
handleIndustriesOpen=事件=>{
this.setState（{ancorel:event.currentTarget}）；
};
handleIndustriesClose=（）=>{
this.setState（{ancorel:null}）；
};
render（）{
const{location:{pathname}}=this.props；
const{anchorEl}=this.state；
返回(
打开菜单
航空航天
汽车
能量
工业的
海军陆战队
医疗技术
工具制造商
混合部分
监视
);
}
}
使用路由器导出默认值（SimpleNu）
您不能使用
状态
选择菜单项，因为每次单击菜单项时，状态不会保留。
当您单击菜单项时，应该更改url，组件将重新呈现

因此，解决方案是检查当前位置（url）是否与菜单项的目标url匹配。如果匹配，所选菜单项的
属性应为true。为了获取组件中的当前位置作为道具，您需要使用
with router
HOC of
react router

下面是一个完整的代码来验证它是如何工作的。
从“React”导入React；
从'react router dom'导入{Link}；
从“react router”导入{withRouter}
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
类SimpleMu扩展了React.Component{
状态={
notFound:错误，
值：false，
主持人：空，
};
handleIndustriesOpen=事件=>{
this.setState（{ancorel:event.currentTarget}）；
};
handleIndustriesClose=（）=>{
this.setState（{ancorel:null}）；
};
render（）{
const{location:{pathname}}=this.props；
const{anchorEl}=this.state；
返回(
打开菜单
航空航天
汽车
能量
工业的
海军陆战队
医疗技术
工具制造商
混合部分
监视
);
}
}
使用路由器导出默认值（SimpleNu）查看您的函数（handleIndustriesSelect）。看起来你有打字错误。将其更改为：handleIndustriesSelect=（event）=>{}谢谢，但实际上是一样的。看看你的函数（handleIndustriesSelect）。看起来你有打字错误。将其更改为：handleIndustriesSelect=（event）=>{}谢谢，但实际上是一样的。谢谢，我是通过将MenuItems包装在一个MenuList中并使用menulistrops来实现的，但是我在DOM元素上得到了一个警告“React不识别menulistrops”属性。Aerospace因为
menulistrops
会将这些道具传递给DOM元素，基本上就是
。为什么要使用
menulistrops
或
MenuList
？请看一个例子，好的，谢谢，我是通过将MenuItems包装在一个MenuList中并使用menulistrops来实现的，但是我得到了一个警告，即DOM元素上的“React不识别menulistrops”属性。AerospaceBecause
menulistrops
会将这些道具传递给t