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"});

Shoud be：

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

同样setState()是异步的，因此你的console.log语句可能不会显示实际的新状态，如果你真的想在设置新状态后做某事，你应该给它一个回调函数作为第二个论点。

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

Answer 2

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

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

Answer 3

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

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

ReactJs onClick添加className

3 个答案: