ReactJS：单击时创建图像ID答案

【问题标题】：ReactJS: Create image id when clickedReactJS：单击时创建图像ID
【发布时间】：2018-08-15 03:32:18
【问题描述】：

以下代码使用 React JS 显示网页上的图像列表：

this.searchResultsList = this.searchResults.map(function(photo){
    return <div className="dataSetBox" key={photo.toString()}><img src={photo} alt="Image" height="350" width="450" margin="15px" border= "10" onClick={() => imageClick(id = "border")} /></div>;
})

当在网页上单击图像时，我希望该图像周围出现边框。将用黑色边框包围图像。

但是，我希望仅在单击图像后才显示边框。我上面的代码不起作用，我得到 id 未定义的错误。知道如何解决吗？

【问题讨论】：

这个问题实际上并不是那么简单，可能需要使用local component state 来处理图像有边框的状态。在回答之前，您是否要使其只有一个图像可以有边框？或者你想让每个图像的边框都可以“切换”开和关吗？
感谢您的快速响应。我现在将研究本地组件状态。我想要它，以便在单击时可以打开和关闭每个图像的边框（不限于一个）。
当然 :) 看起来 @HarshMakadia 写了一个很好的例子来说明如何做到这一点
感谢您的帮助 :)

标签： javascript image reactjs onclick

【解决方案1】：

以下是如何管理此问题的示例。您需要一个状态变量来处理它。它会在点击时自动切换边框。

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

class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.applyBorder = this.applyBorder.bind(this);
        this.state = {
            showBorder : false
        }
    }

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

    render() {
        return(
            <div id="root">
                <img src="https://www.npmjs.com/static/images/avatars/Avatar2.svg" onClick={this.applyBorder} style={this.state.showBorder ? CSSVariables.border : CSSVariables.noBorder}/>
            </div>

        );
    }
}

export default TestJS;

【讨论】：

好答案！我想指出的一件事：根据当前状态进行状态更新时，使用the callback form of setState 被认为是更好的做法，如下所示：this.setState(state => ({ showBorder: !state.showBorder }))
@kingdaro - 是的，你是对的，因为它是异步的，最好在回调中更新。更新了答案。
@HarshMakadia 感谢您的解决方案！切换开/关边框适用于所有边框。但是，我怎样才能让它只改变我选择的边框？