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

Question

我有一个使用React JS构建的网页。 该网页在render中的map函数中render图像列表。 如我的代码所示，当我单击图像时， 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

您的州只为所有图像存储一个布尔值。 通常，当此布尔值为true时，所有图像都具有边框。 而不是布尔值，您应该存储例如最后单击的照片的“ 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" />