如何扩展li内部存在的元素。我在选择时使用了切换
我尝试添加默认属性选择的false,然后onClick,li
我确保值是否匹配然后selected应该为true并显示该特定部分,并且onClick应当折叠
是否有可能总是打开剩余的第一个下拉菜单,而单击其他下拉菜单则打开另一个下拉菜单。
目前onClick无法正常运作
这是我的代码演示
export default function App() {
const filterAddition = X.map((item) => ({
...item,
menus: item.menus.map((items) => ({
...items,
selected: false
}))
}));
const handleOnClick = (event) => {
filterAddition.map((item) => {
item.menus.map((items) => {
if (items.El=== event.target.value) {
return {
...items,
selected: !item.selected
};
}
});
});
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<nav className="animated bounceInDown">
{filterAddition.map(({ menus }, idx) => {
return menus.map(({ El, subSection, selected }, idx) => (
<ul key={idx}>
<li className="sub-menu" value={El} onClick={handleOnClick}>
<a href="#settings">
{El}
<div class="fa fa-caret-down right"></div>
</a>
{selected && (
<ul>
{subSection.map(({ E }, i) => (
<li key={E}>
<a href="#settings">{E}</a>
</li>
))}
</ul>
)}
</li>
</ul>
));
})}
</nav>
</div>
);
}
有太多改变。
useState
来使组件在数据更改时具有反应性。onClick
必须改变。看到这个https://codesandbox.io/s/pensive-cloud-9mco1?file=/src/App.js
import React, { useState, useEffect } from "react";
import "./styles.css";
const X = [
{
detail1: "FirstJob",
menus: [
{
Order: 1,
El: " Record Management",
subSection: [
{
E: "Check Notification",
Order: "CheckNotification"
},
{
E: "Check Record",
Order: "CheckRecord"
}
]
},
{
Order: 2,
El: "Management",
subSection: [
{
E: "Notification",
Order: "Notification"
},
{
E: "Check",
Order: "Check"
}
]
}
]
}
];
export default function App() {
const [state, setState] = useState(X);
useEffect(() => {
const filterAddition = X.map((item) => ({
...item,
menus: item.menus.map((items) => ({
...items,
selected: false
}))
}));
setState(filterAddition);
}, []);
const handleOnClick = (label) => {
const temp = JSON.parse(JSON.stringify(state));
for(let i in temp) {
const menus = temp[i].menus;
for(let j in menus) {
const item = temp[i].menus[j];
if(item.El === label) {
item.selected = !item.selected;
}
}
}
setState(temp);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<nav className="animated bounceInDown">
{state.map(({ menus }, idx) => {
return menus.map(({ El, subSection, selected }, idx) => (
<ul key={idx}>
<li className="sub-menu" value={El} onClick={() => handleOnClick(El)}>
<a href="#settings">
{El}
<div className="fa fa-caret-down right"></div>
</a>
{selected && (
<ul>
{subSection.map(({ E }, i) => (
<li key={E}>
<a href="#settings">{E}</a>
</li>
))}
</ul>
)}
</li>
</ul>
));
})}
</nav>
</div>
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句