Question

以下代码使用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 未定义的错误。知道怎么解决吗？

Answer 1

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

＆＃13;

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;

＆＃13;

ReactJS：单击时创建图像ID

1 个答案: