[英]I'm trying to make a collapse/accordion in React. But the problem is, it is not triggering the specific content that i want to toggle
I'm trying to make a collapse/accordion in React.我正在尝试在 React 中制作折叠/手风琴。 But the problem is, it is not triggering the specific content that I want to toggle ie when I click on the heading, all of the paragraph tags achieved maximum height.
但问题是,它不会触发我想要切换的特定内容,即当我点击标题时,所有段落标签都达到了最大高度。 I know there is no error in this code but I also don't know that how to trigger a specific paragraph tag.
我知道这段代码没有错误,但我也不知道如何触发特定的段落标签。
Here is my React code:这是我的反应代码:
import React, {useState} from 'react'
import style from './stylecss.module.css'
import AnimateHeight from 'react-animate-height'
import cx from 'classname'
import globalStyles from '../Assets/global-styles/bootstrap.module.css'
function Collapse() {
const item = [
{
heading : "HEADING 1",
para : "DATA 1"
},
{
heading : "HEADING 2",
para : "DATA 2"
}
]
const [state, setState] = useState("0")
function displayPara (){
console.log(itemPlace)
if(state==0)
setState("auto")
else
setState(0)
}
const itemPlace = item.map(({heading, para}) => {
return (
<div>
<h5 onClick={ e => displayPara()}>
{heading}
</h5>
<AnimateHeight duration={ 500 } height={ `${state}` }>
<p>{para}</p>
</AnimateHeight>
</div>
)
})
return (
<div className={style.AboutPage}>
{itemPlace}
</div>
)
}
export default Collapse
This is CSS code这是 CSS 代码
.AboutPage {
margin-top : 40px;
padding : 30px 6% 10px 6%;
background-color: rgb(250, 250, 250);
display: flex;
flex-direction: column;
text-align: left;
}
.paraDiv {
color : red !important;
width: 100%;
height : 100%;
background-color: chartreuse;
transition: max-height 0.5s;
}
.paraDiv.is-active {
height: 300px;
}
I would prefer not to use built-in or pre-defined Collapse Components.我不希望使用内置或预定义的折叠组件。
You can do it natively.你可以在本地做。
<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>
Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion 快速提醒,细节/摘要是制作手风琴最简单的方法
First of all good luck!首先祝你好运!
What your code saying is: When user click one of the items (specifically the h5 tag), set the height to auto.您的代码所说的是:当用户单击其中一项(特别是 h5 标签)时,将高度设置为自动。 and you give this height to every item, with no distinction if it's the one that should be open or not.
你给每个项目这个高度,不区分它是否应该打开。
So what you want to do is to apply the height you changed in the 'state' property only to the item the user clicked on.因此,您要做的是将您在“状态”属性中更改的高度仅应用于用户单击的项目。
I've added a couple lines of code to make it.我添加了几行代码来实现它。
activeItem
which indicates which are the active item (the one that the user clicked on).activeItem
,它指示哪些是活动项(用户单击的项)。activeItem
.activeItem
。 You can see it here.在这里你可以看到它。
import React, {useState} from 'react' import style from './stylecss.module.css' import AnimateHeight from 'react-animate-height' import cx from 'classname' import globalStyles from '../Assets/globalstyles/bootstrap.module.css' function Collapse() { const item = [ { heading: "HEADING 1", para: "DATA 1" }, { heading: "HEADING 2", para: "DATA 2" } ] const [state, setState] = useState("0") const [activeItem, setActiveItem] = useState(null) function displayPara (index){ console.log(itemPlace) setActiveItem(index) if(state==0) setState("auto") else setState(0) } const itemPlace = item.map(({heading, para}, index) => { return ( <div> <h5 onClick={ e => displayPara(index)}> {heading} </h5> <AnimateHeight duration={ 500 } height={ `${activeItem === index? state: 0}` }> <p>{para}</p> </AnimateHeight> </div> ) }) return ( <div className={style.AboutPage}> {itemPlace} </div> ) } export default Collapse
As one of the comments above says, you can also achieve it natively without holding any state, using the details and summary HTML tags.正如上面的评论之一所说,您也可以在不持有任何 state 的情况下,使用详细信息和摘要 HTML 标签来实现它。 You can also style it to be exactly like in your design with CSS.
您还可以使用 CSS 将其设置为与您的设计完全相同。
<details> <summary>Heading 1</summary> <p>Heading 1 Content</p> </details>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.