ReactJs onClick 添加类名 [关闭]答案

【问题标题】：ReactJs onClick add className [closed]ReactJs onClick 添加类名 [关闭]
【发布时间】：2016-10-24 20:49:36
【问题描述】：

我是 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>
    );
}
}

【问题讨论】：

标签： javascript reactjs onclick classname

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

似乎是一个小错字：

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

应该是：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：