[英]Change State of an image based on index of array - React.js
我有一些帶有 svg 的卡片,需要根據點擊單獨(向上和向下)更改狀態。 模態由引導程序處理。 所以,我試圖根據數組的索引更改 svg(硬編碼)的 state。 但是,即使我得到了 id(動態的),每次我點擊 svg 箭頭時,所有 svg 都在改變狀態。
我認為 state 不應在 for 循環中更改,我想知道問題是否來自 {this.state.arrowShown && }。 那么,如何只改變被點擊的卡片的svg state,而不改變其他人的state呢?
import Container from 'react-bootstrap/Container'
import Card from 'react-bootstrap/Card'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { withTranslation } from 'react-i18next';
import Accordion from 'react-bootstrap/Accordion'
import Button from 'react-bootstrap/Button'
class ProjectCard extends React.Component {
constructor() {
super();
this.state = {
arrowShown: true,
arrowHidden: false,
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(event, index) {
const id = event.currentTarget.id;
const projectArr = this.props.projects;
console.log("this.props.porjects", this.props.projects)
for (var i = 0; i < projectArr.length; i++) {
console.log("projectArr[i].idP1", projectArr[i].idP2)
if (projectArr[i].idP2 === id) {
console.log("same same")
this.setState({
arrowShown: !this.state.arrowShown,
arrowHidden: !this.state.arrowHidden
})
// newState[projectArr[i].idP2.arrowShown] = projectArr[i].idP2 === projectArr[i].idP2
}
}
// // this.setState(newState)
// }
}
render() {
const { t } = this.props;
// arrowHidden = {}
return (
<React.Fragment>
<Container fluid className=" pb-5" id="Projects">
<Row className="d-flex justify-content-center py-5" xs={1} md={1} lg={3}>
{this.props.projects.map((project, index) => (
<Col className="d-flex justify-content-center px-5 py-5" key=
{project.keyP}>
<Card className="bg-warning" border="light" >
<Card.Img variant="top" src={project.srcP}
className="overlay" />
<Card.Body className="bg-light">
<Card.Title className="text-warning" >
t(project.titleP)}</Card.Title>
<Card.Text>
{t(project.descriptionP)}
</Card.Text>
<Accordion>
<Accordion.Toggle as={Button} variant="link"
eventKey="0" className="p-0" id={project.idP1} >
<Card.Title className="text-warning" >
Features
{this.state.arrowShown
<svg id={project.idP2} onClick={(event) => { this.handleClick(event, index) }} width="1em" height="1em" viewBox="0 0 16 16" className=" down bi bi-chevron-double-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg" >
<path fillRule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
<path fillRule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
</svg>
}
{this.state.arrowHidden &&
<svg id={project.idP3} onClick={(event) => { this.handleClick(event, index) }} width="1em" height="1em" viewBox="0 0 16 16" className=" up bi bi-chevron-double-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg" >
<path fillRule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z" />
<path fillRule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" />
</svg>
}
</Card.Title>
</Accordion.Toggle> ```
ps: it is my first question so every feedback is welcome! Thank you for your support.
[enter image description here][1]
[1]: https://i.stack.imgur.com/0YD01.png
您正在為此處的每張圖片更改 state
this.setState({
arrowShown: !this.state.arrowShown,
arrowHidden: !this.state.arrowHidden
})
並顯示具有相同 state 值的每張圖像。 這就是為什么每次翻轉一個圖像時所有圖像都會被翻轉的原因。
你可以做的是維護一個 state 這樣的東西
this.state = {
[index1] : { arrowShown : true , arrowHidden :false } ,
[index2] : { arrowShown : true , arrowHidden :false } ,
//and so on
}
然后每當基於點擊圖像的索引你只更新 state 像這樣的特定索引......
this.setState({[indexOfTheClickedImage ] : {
arrowShown: !this.state.[indexOfTheClickedImage].arrowShown ,
arrowHidden: !this.state.[indexOfTheClickedImage].arrowHidden
}}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.