![](/img/trans.png)
[英]ReactJS, Same Component, Toggle out class from other component onClick
[英]How to toggle class onCLick in recursive component in reactjs?
我正在构建一个递归可折叠组件,例如
-List1
--List 1.1
--List 1.2
--List 1.3
--List 1.3.1
--List 1.3.2
-List2
--List 2.1
--List 2.2
--List 2.3
--List 2.3.1
--List 2.3.2
如果已经打开任何选项卡,则从JSON expanded=1
。
现在,我想对其应用Toggle功能,以像Accordian一样打开和关闭它。
参考: http : //prntscr.com/laowpp
我的组件代码如下所示:
class List extends React.Component {
constructor(props) {
super(props);
this.recursiveItems = this.recursiveItems.bind(this);
this.toggletab = this.toggletab.bind(this);
}
toggletab(event) {
event.stopPropagation();
}
recursiveItems(t) {
return (
<li
className={[
t.expanded == 1 ? 'active' : '',
].join(' ')}
>
<NavLink to={t.url} className="list" >
{t.title}
</NavLink>
{
t.children &&
<List tabData={t.children} className="child" />
}
</li>
);
}
render() {
const { tabData } = this.props;
return (
<ul>
{
tabData.map((item) => this.recursiveItems(item))
}
</ul>
);
}
}
如果状态没有变化,则除了类名之外,您还要做其他事情。 你可以用这个实现行为
<li
className={[t.expanded == 1 ? "active" : ""].join(" ")}
onClick={e => {
e.target.classList.toggle("active");
}}
>
<NavLink to={t.url} className="list">
{t.title}
</NavLink>
{t.children && <List tabData={t.children} className="child" />}
</li>;
欢迎反馈
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.