Question

单击图像时，我想更改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>) 
}

我想在单击时将className="card-nowna-outer"更改为className="shadow product-details-image"。而且，我的onClick()已经有事要做。最好的方法是什么？

Answer 1

在这里，我用示意图说明您的问题，请注意，我在组件状态下使用一个类，然后单击以更新该类属性。

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;

Answer 2

使用 element.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

    })
}

Answer 3

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

}

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

3 个答案: