Question

我有一系列带有svg的卡片，需要根据点击分别更改状态（上下）。模态由引导程序处理。所以，我试图根据数组的索引更改svg（硬编码）的状态。但是，即使我获得了ID（是动态的），每次单击svg箭头时，所有svg都在改变状态。

我认为状态不应在for循环中更改，并且我想知道问题是否可能来自{this.state.arrowShown &&}。因此，如何仅更改被单击的卡的svg状态而不更改其他状态？

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

Answer 1

您正在此处更改每个图像的状态


this.setState({
        arrowShown: !this.state.arrowShown,
        arrowHidden: !this.state.arrowHidden
    })

，并显示具有相同状态值的每个图像。这就是为什么每次翻转一个图像时都会翻转所有图像的原因。

您可以做的是保持这样的状态


       this.state = {  
           [index1] : { arrowShown : true , arrowHidden :false }  ,
           [index2] : { arrowShown : true , arrowHidden :false }  ,
       //and so on
       }

然后，每当基于单击图像的索引时，您仅会像这样更新特定索引的状态...


       this.setState({[indexOfTheClickedImage ] : { 
                arrowShown: !this.state.[indexOfTheClickedImage].arrowShown ,
                arrowHidden: !this.state.[indexOfTheClickedImage].arrowHidden
       }}

根据数组索引更改图像状态-React.js

1 个答案: