Javascript:在React JS map函数中仅修改单击的图像

我有一个使用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>  
        );
  }
}

从“React”导入React；
从“reactstrap”导入{Container，Button}；
导入“/scrapeStatgram.css”；
常数CSS变量={
边界：{
边框：“2件纯绿”
},
订单：{
边框：“2px实心透明”
},
};
导出默认类Instagram扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
showBorder:错误
};
this.searchTerms=props.location.params[“searchTerms”]；
this.searchResults=props.location.params[“searchResults”].filepath；
this.imageClick=this.imageClick.bind（this）；
}
图像单击（图像\u src）{
this.setState（state=>（{showBorder:！state.showBorder}））
}
render（）{
返回(
图像！！！
{this.searchResults.map（（照片）=>{
返回{this.imageClick（photo.toString（））}style={this.state.showBorder？CSSVariables.border:CSSVariables.noBorder}alt=“Image”height=“350”width=“450”margin=“100px”/>；
})}
);
}
}

您的州仅为所有图像存储一个布尔值。当此布尔值为真时，所有图像都会得到边界，这是正常的。 例如，您应该存储上次单击的照片的“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" />

{this.imageClick（photo）}
style={this.state.lastClicked==photo？CSSVariables.border:CSSVariables.noBorder}
alt=“图像”
height=“350”width=“450”margin=“100px”/

您可以使用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>
        )
    }
}

---

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

您不需要在状态中存储任何内容，只需执行

onClick（（event）=>{event.target.style=cssvvariables.border}）

@EgorEgorov感谢您的回复-很遗憾，我无法实现这一点。我没有发现任何错误，但是边界上没有显示：你的答案有道理！你知道如何打开/关闭多个图像的边框吗？我尝试创建一个数组，如果选中，则将图像ID添加到数组中，如果重新选中，则将其删除。然后对于样式，它在返回边框之前检查图像ID是否在数组中。但是，由于渲染发生在开始时，因此单击图像对边界没有影响，因此可以在组件状态下存储ID数组。imageClick（接收单击的图像的id）可以生成如下内容：

setState（（prevState）=>{if（selectedIDs.includes（id））{return{selectedIDs:prevState.selectedIDs.filter（（i）=>i！==id）}或者{return selectedIDs:[…prevState.selectedIDs，id]}}}}。不要忘记，每次调用setState都会触发重新渲染，因此UI将更新以反映更改。
.selected{
    border: 2px solid green;
}

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