ReactJs onClick add className

Question

私はreactjsを初めて使用しています。

私は問題があります。私のclassNameは、私がonClickイベントをトリガーすると更新されません。問題の原因は何でしょうか？

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：

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

またsetState()、それはあなたに実際の新しい状態が表示されない場合があります右後ので、あなたのconsole.log声明非同期です、新しい状態がセットされた後に本当に何かをしたいのであれば、2番目の引数としてコールバック関数を与えるべきです。

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

Answer 2

あなたはsetStateに割り当てます。関数呼び出しでなければなりません。

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

Answer 3

this.setState反応が更新を処理するために適切な手順を取ることができますので、あなたのための状態を設定する機能です。 this.setStateに新しいオブジェクトを呼び出す必要があり、オブジェクトを現在の状態にマッピングします（setStateは非同期関数なのでコンソールログも機能しない可能性があります）。

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