Reactjs 在React.js onClick中切换一个元素
我有一个info按钮，它应该在单击事件时打开特定的描述元素——info是从Firebase获得的。但是，myOnclick事件会触发所有兄弟元素，我只需要切换/取消切换一个特定的元素。我错过了什么，做错了什么 代码如下：Reactjs 在React.js onClick中切换一个元素,reactjs,toggle,Reactjs,Toggle,我有一个info按钮，它应该在单击事件时打开特定的描述元素——info是从Firebase获得的。但是，myOnclick事件会触发所有兄弟元素，我只需要切换/取消切换一个特定的元素。我错过了什么，做错了什么 代码如下： import React, { Component } from "react"; import firebase from "../../firebase"; //从数据库获取并在第页上呈现的数据 export default cla
import React, { Component } from "react";
import firebase from "../../firebase";
export default class Tour extends Component {
constructor() {
super();
this.state = {
tours: [],
showInfo: false,
};
}
handleInfo = () => {
this.setState({
showInfo: !this.state.showInfo,
});
};
componentDidMount() {
const dbRef = firebase.database().ref();
dbRef.on("value", (snapshot) => {
// checking changes in db
const data = snapshot.val();
const newToursAarray = [];
for (let inventoryName in data) {
const toursObject = {
id: inventoryName,
tours: data[inventoryName],
name: data[inventoryName].name,
seats: data[inventoryName].seats,
date: data[inventoryName].date,
duration: data[inventoryName].duration,
imgUrl:"https://source.unsplash.com/350x350/?" + data[inventoryName].name,
// temporary tour info placeholder and will be removed and connetcted to real DB
info: "Lorem ipsum dolora saepe fugiat. " +
data[inventoryName].name,
};
newToursAarray.push(toursObject);
}
this.setState({
tours: newToursAarray,
});
});
}
render() {
return (
<div className="tourlist">
{this.state.tours.map((toursObject) => {
return (
<section className="tourItem">
<header>
<h3> {toursObject.name} </h3>
<h5>
info
{/* button that toggles info */}
<span onClick={this.handleInfo}>
<i className="fas fa-caret-square-down"></i>
</span>
</h5>
</header>
<ul className="inventoryItem" key={toursObject.id}>
<li> {toursObject.date} |</li>
<li>{toursObject.duration} hrs |</li>
<li> {toursObject.seats} seats </li>
</ul>
<div className="img-container">
{this.state.showInfo && (
// text that toggles when clicking on info button
<p className="tour-info">{toursObject.info}</p>
)}
<img src={toursObject.imgUrl} alt="image of the tour" />
</div>
</section>
);
})}
</div>
);
}
}
componentDidMount（）{
const dbRef=firebase.database（）.ref（）；
dbRef.on（“值”，（快照）=>{
//检查数据库中的更改
const data=snapshot.val（）；
常数newToursAarray=[]；
for（让inventoryName输入数据）{
常数toursObject={
id:inventoryName，
巡视：数据[inventoryName]，
名称：数据[inventoryName]。名称，
座位：数据[inventoryName]。座位，
日期：数据[inventoryName]。日期，
持续时间：数据[inventoryName]。持续时间，
imgUrl:“https://source.unsplash.com/350x350/?“+数据[inventoryName]。名称，
//临时巡更信息占位符，将被删除并连接到real DB
信息：“Lorem ipsum dolora saepe fugiat。”+
数据[inventoryName]。名称，
};
新图尔萨雷推（toursObject）；
}
这是我的国家({
旅游：纽图萨雷，
});
});
}
render（）{
返回(
{this.state.tours.map（（toursObject）=>{
返回(
{toursObject.name}
信息
{/*切换信息的按钮*/}
- {toursObject.date}|
- {toursObject.duration}小时|
- {toursObject.座位}座位
{this.state.showInfo&&(
//单击“信息”按钮时切换的文本
{toursObject.info}
)}
);
})}
);
}
}
州。showInfo旅游地图之外。所以，当你在旅行中绘制地图时，你会说“如果‘showInfo’，那么就显示这一部分”，而‘showInfo’对所有东西都是一样的
我建议您存储扩展对象的id
，然后您可以进行检查
大概是这样的：
handleInfo = (id) => {
this.setState({
infoToShow: id,
});
};
<span onClick={() => this.handleInfo(tourObject.id)}>
<i className="fas fa-caret-square-down"></i>
</span>
然后在您的onClick
中，它看起来更像这样：
handleInfo = (id) => {
this.setState({
infoToShow: id,
});
};
<span onClick={() => this.handleInfo(tourObject.id)}>
<i className="fas fa-caret-square-down"></i>
</span>
this.handleInfo（tourObject.id）}>
显示或隐藏的逻辑可以是：
{this.state.infoToShow === tourObject.id && (
// text that toggles when clicking on info button
<p className="tour-info">{toursObject.info}</p>
)}
{this.state.infoToShow===tourObject.id&&(
//单击“信息”按钮时切换的文本
{toursObject.info}
)}
通过这种方式，您可以将id存储在一个可供所有循环旅行访问的位置，但它们不会相互冲突
因此，与其检查showInfoid