Javascript 如何在onClick事件中添加引导类。

我想在单击图像时更改div的类。我想知道是否可以通过onClick事件来实现这一点

imageSwitch = (image) => {

    this.setState({
        image: image

    })
}

这里是onClick的位置：

{       
    !items.media ? <div></div>          
    : items.media.length === 1 ?
    <div></div>         
    : items.media.map((item, i) => <div className="col"
    key={i}>            
    <div className="card-nowna-outer" onClick={() =>
      this.imageSwitch(item.url)}>
      <img className="card-img-top" src={item.url} key={i} alt="item.name"/>    
     </div>         
   </div>) 
}

{
！items.media？
：items.media.length==1？
：items.media.map（（item，i）=>
this.imageSwitch（item.url）}>
) 
}

---

我想在单击时将

className=“card nowna outer”

更改为

className=“shadow product details image”

。但是，我的

onClick（）

也有一些事情要做。解决这个问题的最佳方法是什么？

在这里，我用一个示意图来解决您的问题， 请注意，我使用的是处于组件状态的类，单击“我更新该类属性”

class Component1 extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            cssClass: 'card-nowna-outer',
            image: ''
        };
        this.imageSwitch = this.imageSwitch.bind(this);
    }

    imageSwitch(image) {
        this.setState({
            image: image,
            cssClass: 'shadow product-details-image'
        })
    }

    render() {
        return (
            <div>
                {
                    !items.media ? <div></div>
                        : items.media.length === 1 ?
                            <div></div>
                            : items.media.map((item, i) => <div className="col"
                                key={i}>
                                <div className={this.state.cssClass} onClick={() => this.imageSwitch(item.url)}>
                                    <img className="card-img-top" src={item.url} key={i} alt="item.name" />
                                </div>
                            </div>)
                }
            </div>
        );
    }
}

export default Component1;

class Component1扩展了组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
cssClass:“外部无卡”，
图像：“”
};
this.imageSwitch=this.imageSwitch.bind（this）；
}
图像开关（图像）{
这是我的国家({
图像：图像，
cssClass:“阴影产品详细信息图像”
})
}
render（）{
返回(
{
！items.media？
：items.media.length==1？
：items.media.map（（item，i）=>
this.imageSwitch（item.url）}>
)
}
);
}
}
导出默认组件1；

使用元素.classList.add（）

更新imageSwitch方法，如下所示：

imageSwitch = (image) => {
    // Assuming you have only one element with class as 'card-img-top'
    var img = document.getElementsByClassName('card-img-top')[0];
    if (img) {
      img.classList.remove("card-img-top");
      img.classList.add("shadow");
      img.classList.add("product-details-image");
    }

    this.setState({
        image: image

    })
}

可以使用push（）和join（）添加类。push（）方法将一个或多个元素添加到数组的末尾，join（）方法将数组的所有元素连接到一个字符串中

{

---

}

可以在单击图像时切换变量并将其设置为状态。然后根据状态变量更改类。简单的

!items.media ? <div></div>          
: items.media.length === 1 ?
    <div></div>         
: items.media.map((item, i) =>
    <div className="col" key={i}>            
        <div className={class_names.join('' )} onClick={() =>this.imageSwitch(item.url)}>
            <img className="card-img-top" src={item.url} key={i} alt="item.name"/>    
        </div>         
    </div>
    )

let class_names = ["card-nowna-outer"];
imageSwitch = (image) => {
class_names.push("class_name");
this.setState({ image: image })