ReactJs onClick add className

Question

Я новичок в реакции.

У меня проблема. Мое имя класса не обновляется, когда я запускаю событие 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 заявления сразу после того, он не может показать вам фактическое новое состояние, если вы действительно хотите что-то сделать после установки нового состояния, вы должны дать ему функцию обратного вызова в качестве второго аргумента.

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