![](/img/trans.png)
[英]How do I access the index of a selected item in list using React and Material UI?
[英]How do I show which item in the Menu List is selected with Material UI React?
我正在嘗試根據將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>
您不能使用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);
您需要在每個MenuItem
上顯式設置name
。
MenuListProps
確實僅適用於內部MenuList
組件,不適用於MenuItem
。
但是,在您的情況下,我不使用名稱prop,只需在setState
直接設置它即可:
handleIndustriesSelect = event => {
this.setState({ industry: event.target.value });
另外,看起來e.target.value
也是undefined
,如果對您來說確實如此,那么您也必須傳遞value
屬性,這是過度復雜的標志。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.