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

您正在分配给 setState。应该是函数调用。

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

Answer 2

似乎是一个小错别字：

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

应该是：

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

另外 setState() 是异步的，所以你的 console.log 声明在它之后可能不会显示实际的新状态，如果你真的想在设置新状态后做某事，你应该给它一个回调函数作为第二个参数。

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

Answer 3

this.setState 是一个为您设置状态的函数，以便 React 可以采取适当的步骤来处理更新。您需要用一个新对象调用 this.setState，它会将对象映射到您当前的状态（控制台日志可能也不起作用，因为 setState 是一个异步函数）。

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

ReactJs onClick 添加类名

ReactJs onClick add className

javascript

onclick

classname

reactjs