[英]React Handling component onClick (one opens, but another closes)
我在为我的问题寻找解决方案或正确方向时遇到问题。 目前,一旦您单击 -> className="List-section" ,它将显示 -> className="Paragraph-container" 中的信息,但它有 4 个部分,如果其中一个打开,我想制作它,另一个关闭。 因为现在我可以打开所有关闭,但它必须一次打开一个。 如果有帮助,这里是原型的链接: https : //www.figma.com/proto/ooya7hVTx4BvdwQQFPXZcj/CCT-Lab-task? node-id=5%3A711 &scaling=min-zoom&page-id=0%3A1&starting-点节点id=5%3A509
提前感谢所有帮助!
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>
);
}
我认为您在这里拥有的结构对于您正在寻找的这种行为并不是最佳的。
我建议做类似的事情:
function ListItem({ listNumber, listData }) { const [currentSection, setCurrentSection] = useState(0); const totalSections = listData.items.length; const handleOpenSection = () => { const nextSection = currentSection === totalSections ? 0 : currentSection + 1; setCurrentSection(nextSection); } return ( <div className="List"> <div className="List-section" onClick={handleOpenSection} > <div className="Section-item">{listNumber}</div> <p className="Section-title">{listData.title}</p> </div> <div className="List-paragraph"> {listData.items.map((paragraphItem, index) => ( {currentSection === index && <div className="Paragraph-container" key={index}> <CheckedIcon /> <p className="Paragraph-item">{paragraphItem}</p> </div> } ))} </div> </div> ); }
当您处理 4 个部分时,不可能使用布尔值来实现此行为,因此此建议使用items
数组中每个部分的位置来查看当时哪个部分处于打开状态。
handleOpenSection
函数只是一个看似合适的建议,因为您不希望currentSection
大于您拥有的总节数。 此外,此代码将显示第一次渲染中的第一部分,这是您可能不希望发生的事情!
这是我从组件获取数据并将逻辑传递给组件的地方。
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>
);
}
这就是我想处理部分逻辑的地方,如果你打开一个,之前打开的关闭等等。
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.