Javascript：在 React JS 地图功能中修改仅点击的图像

Question

我有一个使用 React JS 构建的网页。该网页在render 内的map 函数中显示图像列表。当我单击图像时，正如我的代码所预期的那样，map 函数中的每个图像周围都会出现一个边框。但是，我只想为已单击的图像显示一个边框。知道如何修改我的代码来做到这一点吗？谢谢。

import React from 'react';
import { Container, Button} from 'reactstrap';
import './scrapeInstagram.css';

const CSSVariables = {
  border : {
      border : '2px solid green'
  },
  noBorder : {
      border : '2px solid transparent'
  },
};

export default class ScrapeInstagram extends React.Component { 
    constructor(props) {
        super(props);
        this.state = {
            showBorder : false
        };
        this.searchTerms = props.location.params["searchTerms"];
        this.searchResults = props.location.params["searchResults"].filePaths;
        this.imageClick = this.imageClick.bind(this);
    }

    imageClick(image_src) {
        this.setState(state => ({ showBorder: !state.showBorder }))
    }


    render() {
        return (
            <Container>
            <center>
            <h1> IMAGES!!! </h1>
            <div className="box">
            {this.searchResults.map((photo) => {
                return <div className="dataSetBox" key={photo.toString()}><img id={this.state.ID} src={photo} onClick={() => { this.imageClick(photo.toString()) }} style={this.state.showBorder ? CSSVariables.border : CSSVariables.noBorder} alt="Image" height="350" width="450" margin="100px" /></div>;
            })}
            </div>
            </center>
            </Container>  
        );
  }
}

Answer 1

你可以使用一个CSS类来一样

class Images extends React.Component{
    state = {
        selected: []
    }

    selectImage(id){
        var selected = this.state.selected;
        if(selected.indexOf(id) !== -1) selected.push(id);
        this.setState({selected: selected});
    }

    render(){
        return (
           <div className="images">
               <ul>
                   {images.map(img => {
                       return <li><img id={img.id} src={img.src} onClick={this.selectImage.bind(this, img.id)} className={(this.state.selected.indexOf(img.id) !== -1)?"selected":"not-selected"} alt="Image" height="350" width="450" margin="100px" /></li>
                   })}
               </ul>
           </div>
        )
    }
}

在你的 CSS 中

.selected{
    border: 2px solid green;
}

.not-selected{
    border: 2px solid transparent;
}

希望对您有所帮助，如果有任何困惑，请告诉我。

Answer 2

您的状态只为所有图像存储一个布尔值。当这个布尔值为真时，所有图像都有边框是正常的。 您应该存储例如最后点击照片的“src”而不是布尔值。然后，对于每个 img，您可以执行以下操作：

<img
    src={photo}
    onClick={() => { this.imageClick(photo) }}
    style={this.state.lastClicked === photo ? CSSVariables.border : CSSVariables.noBorder}
    alt="Image"
    height="350" width="450" margin="100px" />