显然,这是非常的菜鸟问题,但我被卡住了,所以请帮助!
在我的MenuWithDropdown组件中,我创建了一系列下拉列表。应使用handleClick()函数触发下拉列表。我想要实现的是通常在this.state.isActive和三元运算符的帮助下完成的:
className={this.state.isActive ? "dropdown is-active" : "dropdown"}
但是,我不明白如何只触发一个下拉菜单(例如3号)。我应该使用state.isActive1,state.isActive2,state.isActive3并稍后以handleClick(键)访问它们吗?或者我应该访问下拉列表的关键属性,它是否通过map,如if(Dropdown.key === 3)setState(isActive:true)
class MenuWithDropdown extends React.Component {
state = {
isActive: false
};
render() {
const { Menu } = this.props;
const items = Menu.map((menuitem, key) => (
<Fragment key={key}>
<hr className="dropdown-divider" />
<div key={key} className="dropdown is-left">
<div className="dropdown-header">
<NavLink to={menuitem.url}>
<span>{this.context.t(menuitem.name)}</span>
</NavLink>
<FontAwesomeIcon icon="chevron-down" size="2x" />
</div>
<div className="dropdown-menu">
<DropdownItem children={menuitem.children} />
</div>
</div>
</Fragment>
));
return <Fragment>{items}</Fragment>;
}
handleClick = (e, key) => {
e.preventDefault();
this.setState({
isActive: true
});
};
}
这样做的最好和最简单的方法之一是存储DropDownItem的索引(键),该索引(键)已经从.map函数中的menuWithDropDown状态中单击,然后为DropDownItem提供一个prop,以便检查是否由条件与菜单状态项索引(您之前存储的)具有相同的索引,它应该打开或不打开。这是您的代码版本,与上面解释的相同:(希望它有帮助)
class MenuWithDropdown extends React.Component {
state = {
activeItemKey: '',
};
render() {
const { Menu } = this.props;
const items = Menu.map((menuitem, key) => (
<Fragment key={key}>
<hr className="dropdown-divider" />
<div key={key} className="dropdown is-left">
<div className="dropdown-header">
<NavLink to={menuitem.url}>
<span>{this.context.t(menuitem.name)}</span>
</NavLink>
<FontAwesomeIcon icon="chevron-down" size="2x" />
</div>
<div className="dropdown-menu">
<DropdownItem shouldOpen={this.state.activeItemKey === key} onClick={()=>{this.handleClick(key)}} children={menuitem.children} />
</div>
</div>
</Fragment>
));
return <Fragment>{items}</Fragment>;
}
handleClick = (key) => {
this.setState({
activeItemKey: key
});
};
}
我设计这个菜单的方式基本上是这样的: (看看这个工作示例:https://stackblitz.com/edit/toggling-menus)
在我的App组件中,我有一个menus
状态,我存储每个菜单的数据。在componentDidMount
我生成菜单并通过道具将状态传递给MenusContainer。
class App extends Component {
constructor() {
super();
this.state = {
menus: []
};
}
componentDidMount(){
const menus = [
{
id: 1,
title: 'Menu one',
content: 'some content for menu 1'
},
{
id: 2,
title: 'Menu two',
content: 'some content for menu 2'
},
{
id: 3,
title: 'Menu three',
content: 'some content for menu 3'
}
];
this.setState({menus})
}
render() {
return (
<div>
<MenusContainer menus={this.state.menus}/>
</div>
);
}
}
MenusContainer将负责渲染菜单,迭代其menus
道具并设置当前菜单。为此,它将有一个currentMenu
状态和一个setMenu方法将它们作为道具传递给DropdownMenu
渲染的props.menus
儿童。
export default class MenusContainer extends React.Component {
constructor(props) {
super();
this.state = {
currentMenu: -1,
}
}
setMenu = (id) => {
if(id === this.state.currentMenu) {
this.setState({currentMenu: -1})
} else {
this.setState({currentMenu: id})
}
}
render() {
return <div id='container'>
{this.props.menus.map((menu, i) => {
return <DropdownMenu
key={i}
data={menu}
currentItem={this.state.currentMenu}
setMenuCallback={this.setMenu}
/>
})}
</div>
}
}
DropdownMenu将知道(来自道具)当前请求的菜单,并将触发一个方法,将其自身设置为其道具中的当前菜单。
请注意,根据conditionally render,菜单将props.currentItem
的内容。
export default class DropdownMenu extends React.Component {
toggleSelf = () => {
const {id} = this.props.data;
this.props.setMenuCallback(id)
}
render() {
return <div className='menu-item' onClick={this.toggleSelf}>
<h1>{this.props.data.title}</h1>
{
this.props.currentItem === this.props.data.id ?
<div>{this.props.data.content}</div> : null
}
</div>
}
}
好的,解决方案,感谢Mehrnaz.sa,非常简单,在状态中存储一个活动密钥,而不是打开 - 关闭下拉列表的true-false布尔值。
工作代码:
class MenuWithDropdown extends React.Component {
state = {
activeKey: 0
}
render() {
const { Menu } = this.props
const items = Menu.map((menuitem, key) =>
<Fragment key={key}>
<hr className="dropdown-divider" />
<div key={key}
className={this.state.activeKey === key ? "dropdown is-left is-active" : "dropdown is-left"}>
<div className="dropdown-header">
<NavLink to={menuitem.url}>
<span>{this.context.t(menuitem.name)}</span>
</NavLink>
//clicking on this icon trigger the dropdown
<FontAwesomeIcon icon="chevron-down" size="2x" onClick={e => {this.handleClick(e, key)}}/>
</div>
<div className="dropdown-menu">
// this is just a text, links to other parts of an app
<DropdownItem children={menuitem.children} />
</div>
</div>
</Fragment>
)
return (
<Fragment>
{items}
</Fragment>
)
}
handleClick = (e, key) => {
e.preventDefault()
this.setState({
activeKey: key
})
}
}