[英]ReactJs - how to keep only one "active" section at a time
I'm having issues with finding a solution or correct direction for my problem.我在为我的问题寻找解决方案或正确方向时遇到问题。 At the moment once you click on -> className="List-section", it will show the information in -> className="Paragraph-container", but there are 4 sections of it and I want to only allow one section to be open at a time .目前一旦你点击 -> className="List-section",它会显示 -> className="Paragraph-container" 中的信息,但它有 4 个部分,我只想允许一个部分一次打开。 At the moment I can open all of them and be displayed.目前我可以打开所有这些并显示出来。 If it helps, here's the link to the prototype(and how the flow should be): https://www.figma.com/proto/ooya7hVTx4BvdwQQFPXZcj/CCT-Lab-task?node-id=5%3A711&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=5%3A509如果有帮助,这里是原型的链接(以及流程应该如何): https : //www.figma.com/proto/ooya7hVTx4BvdwQQFPXZcj/CCT-Lab-task?node-id=5%3A711&scaling=min-zoom&page -id=0%3A1&starting-point-node-id=5%3A509
Thanks for all the help in advance!提前感谢所有帮助!
Parent Component父组件
function App() {
const data = [
{
title: "Build test task",
items: [
"Create repositor",
"Implement designs",
"Implement functionality",
],
},
{
title: "Submit your test task",
items: [
"Open email client",
"Sent link information to careers@cornercasetech.com",
],
},
{
title: "Participate in tech interview",
items: ["Talk with HR", "Talk with Tech team"],
},
{
title: "Reciece anster",
items: ["Receive answers", "Start your IT career"],
},
];
return (
<div className="App">
<header className="App-header">
<h1>CCT Lab Process</h1>
</header>
<div className="App-content">
{data.map((dataObject, index) => (
<ListItem key={index} listData={dataObject} listNumber={index + 1} />
))}
</div>
</div>
);
}
Child Component子组件
function ListItem({ listNumber, listData }) {
const [isShownOne, setIsShownOne] = useState(false);
return (
<div className="List">
<div className="List-section" onClick={() => setIsShownOne(!isShownOne)}
>
<div className="Section-item">{listNumber}</div>
<p className="Section-title">{listData.title}</p>
</div>
{isShownOne && (
<div className="List-paragraph">
{listData.items.map((paragraphItem, index) => (
<div className="Paragraph-container" key={index}>
<CheckedIcon />
<p className="Paragraph-item">{paragraphItem}</p>
</div>
))}
</div>
)}
</div>
);
}
BTW, tried to google all possible options but was not able to find a solution.顺便说一句,试图用谷歌搜索所有可能的选项,但无法找到解决方案。 Some suggest checking id in the Parent component and passing the logic to the Child.有人建议检查父组件中的 id 并将逻辑传递给子组件。 Feeling a bit lost at the moment!此刻感觉有点失落!
Lift the state up into the parent component, and change it to a number.将状态提升到父组件中,并将其更改为数字。 The value represents which child (if any) is open.该值表示哪个子项(如果有)是打开的。 Then pass down a prop to each child.然后将道具传递给每个孩子。
function App() {
const [open, setOpen] = useState(-1);
// ...
{data.map((dataObject, index) => (
<ListItem
key={index}
listData={dataObject}
listNumber={index + 1}
open={open === index}
setOpen={setOpen}
/>
))}
}
function ListItem({ listNumber, listData, open, setOpen }) {
// ...
<div
className="List-section"
onClick={() => {
setOpen(prev => {
if (prev === listNumber - 1) {
return -1;
} else {
return listNumber - 1;
}
})
}}
>
// ...
{open && (
<div className="List-paragraph">
{listData.items.map((paragraphItem, index) => (
<div className="Paragraph-container" key={index}>
<CheckedIcon />
<p className="Paragraph-item">{paragraphItem}</p>
</div>
))}
</div>
)}
</div>
}
You may be interested in this article: https://reactjs.org/docs/lifting-state-up.html你可能对这篇文章感兴趣: https : //reactjs.org/docs/lifting-state-up.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.