javascript - ReactJs onClick 添加类名

Question

我是reactjs新手。

所以我有一个问题。当我触发 onClick 事件时，我的 className 不会更新。是什么可能导致这个问题？

import React from "react";
import ReactDOM from "react-dom";

export default class Categorie extends React.Component {
constructor() {
    super();
    this.state = {categorie: "oldClass"};
}

addClassName() {
    this.setState = ({categorie: "newClass"});
    console.log(this.state.categorie);
}

render() {
    return(
        <div className={this.state.categorie} onClick={this.addClassName.bind(this)}>
            <div className="categorieImgBlock">
               <img className="categorieImg" src={this.props.img}/>
            </div>
            <span className="categorieName">{this.props.name}</span>
            <span className="categorieCount">( {this.props.count} )</span>
        </div>
    );
}
}

Answer 1

似乎是一个小错字:

this.setState = ({categorie: "newClass"});

应该是:

this.setState({categorie: "newClass"});

此外，setState() 是异步的，因此如果您确实想在 new 之后执行某些操作，那么紧随其后的 console.log 语句可能不会显示实际的新状态状态已设置，您应该给它一个回调函数作为第二个参数。

this.setState({categorie: "newClass"}, () => console.log(this.state.categorie));