ReactJs onClick ajouter className

Question

Je suis nouveau sur reactjs.

J'ai donc un problème. Mon className ne se met pas à jour lorsque je déclenche l'événement onClick. Quel pourrait être le problème?

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

On dirait une faute de frappe mineure:

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

qui devraient être: déclaration

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

également setState() est asynchrone de sorte que votre console.log juste après qu'il pourrait ne pas vous montrer le nouvel état actuel, Si vous voulez vraiment faire quelque chose après avoir défini un nouvel état, vous devez lui donner une fonction de rappel en tant que second argument.

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

Answer 2

Vous affectez à setState. Devrait être appel de fonction.

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

Answer 3

this.setState est une fonction qui définit l'état pour vous afin que réagir peut prendre des mesures appropriées pour faire face à une mise à jour. Vous devez appeler this.setState avec un nouvel objet et il mappera l'objet à votre état actuel (le journal de la console peut ne pas fonctionner car setState est une fonction asynchrone).

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