如何解决React-如何更改当前单击项目的手风琴标题文本 想法:
我正在制作一个简单的Reactjs手风琴应用程序,其中每个项目都可以折叠和展开。
要求:
一个简单的要求是,我需要根据点击将标题的文本切换为展开或收缩。
如果我们单击任何一项,则内容将显示出来,在这种情况下,文本会更改为“收缩”,因为手风琴被打开了,因此为收缩手风琴指定了“收缩”标题。
完整的工作示例:
在上面的示例中,我使用了以下代码来更改文本,
Accordion.js
import React,{ useState } from "react";
import Text from "./text";
import Heading from "./heading";
import getAccordion from "./GetAccordion";
const Accordion = getAccordion(1);
const accordionData = [
{
id: 1,content: "This is a first content"
},{
id: 2,content: "This is a second content"
},{
id: 3,content: "This is a third content"
}
];
const NormalAccordion = () => {
const [toggleValue,setToggleValue] = useState(-1);
const toggleHandler = (index) => {
setToggleValue(index);
};
return (
<div>
{accordionData.map((item,index) => (
<Accordion>
<Heading>
<div
style={{ padding: "10px",cursor: "pointer" }}
className="heading"
onClick={() => toggleHandler(index)}
>
{toggleValue !== index ? `Expand` : `Shrink`}
</div>
</Heading>
<Text>{item.content}</Text>
</Accordion>
))}
</div>
);
};
export default NormalAccordion;
此行{toggleValue !== index ? `Expand` : `Shrink`}
仅更改一次文本,但是此后在进一步切换标题(扩展/收缩)时,它没有进行任何更改。
请帮助我实现基于相应单击在“展开”和“收缩”之间切换文本的结果。
解决方法
如果已单击toggleValue
,则应将其重置:
const toggleHandler = (index) => {
index===toggleValue?setToggleValue(-1): setToggleValue(index);
};
然后使用条件呈现当前内容:
<Text>{toggleValue === index && item.content}</Text>
并将Text
组件简化为此:
<div style={{ ...this.props.style }}>
<div className={`content ${this.props.text ? "open" : ""}`}>
{this.props.children}
</div>
</div>
,
您应该使用布尔值,因为手风琴可以有2个值。
想法:
- 创建一个独立的accourdion组件,以定义展开/折叠的行为。
- 创建一个调用该组件的包装器视图组件。
- 从此视图作为道具传递数据,而不使用本地硬编码对象。
此方法的好处是您有2个仅可在道具上使用的模块化组件。这些可以稍后导出到自己的独立库中。
理想情况下,组件应该是愚蠢的,并且仅应根据状态和道具知道其自身的行为。
- Accoirdion组分发生变化
const [toggleValue,setToggleValue] = useState(false);
const toggleHandler = () => {
setToggleValue(!toggleValue);
};
- 手风琴视图发生变化
const AccordionView = ({ accordionData }) => {
return (
<div>
{accordionData.map((item) => (
<NormalAccordion content={item.content} />
))}
</div>
);
};
- 常量:我创建了一个名为常量的文件夹,该文件夹将容纳硬编码的对象,然后使用来自
index.js
的道具传递给它
export const accordionData = [{
id: 1,content: "This is a first content"
},{
id: 2,content: "This is a second content"
},{
id: 3,content: "This is a third content"
}
];
-
index.js
中的变化
import { accordionData } from '../constants/accordion-data'
...
<NormalAccordion accordionData={ accordionData } />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。