Почему не вешается обработчик на react компонент?

Question

[KirylLapouski]

Есть такой компонент

var React = require('react');
class Task extends React.Component {

    constructor(props){
      super(props);

      this.state = {
        isOpened:false
      }
    }
    clickHandler(e){
      e.preventDefault();
      console.log('!!!');
      this.setState({
        isOpened: !this.state.isOpened
      });
      return false;
    }

    render(){
      var description = this.state.isOpened?this.props.description:'';

        return <a onClick={this.clickHandler.bind(this)} href="#" className="list-group-item list-group-item-action flex-column align-items-start">
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">{this.props.name}</h5>
          <small>3 days ago</small>
        </div>
        <p className="mb-1">{description}</p>
      </a>
    }
}

module.exports = Task;

Но когда отрендерил элемент обработчика не увидел.

Что не так?

Answer 1

[Антон Спирин]

А с чего вы взяли что он там должен быть? Вам, думаю, стоит подтянуть основы JavaScript.

Если используете синтаксис ES6, используйте импорты и экспорты:
import React from 'react';

export default Task;

Хандлеры лучше биндить не в render, а в конструкторе:

constructor(props) {
  super(props);

  this.state = {
    isOpened: false,
  };

  this.clickHandler = this.clickHandler.bind(this);
}

Или определяйте хандлер как class field arrow function:

clickHandler = e => {
  // your stuff
};

Такая функция привязана к контексту экземпляра и биндить ее не надо.
create-react-app поддерживает такой синтаксис из коробки.

Нельзя передавать текущее состояние в метод setState, так как это асинхронный метод, к моменту вызова состояние может успеть измениться и будет использовано старое значение. Чтобы обновить состояние на основе предыдущего передавайте в setState функцию возвращающую объект. При вызове, первым аргументом в нее придет актуальное состояние на момент обновления:

this.setState(prevState => ({
  isOpened: !prevState.isOpened,
}));

Вместо var используйте const для неизменяемых значений и let для изменяемых.

Наконец, следите за чистотой кода. Вот хорошие гайдлайны от Airbnb:
Гайдлайн Airbnb по JavaScript
Гайдлайн Airbnb по React

Comments

[KirylLapouski]

Спасибо, но обработчик всё ещё не работает.

var React = require('react');
class Task extends React.Component {

    constructor(props){
      super(props);

      this.state = {
        isOpened:false
      }
      this.clickHandler = this.clickHandler.bind(this);
    }
    clickHandler(e){
      e.preventDefault();
      console.log('!!!');
      this.setState(prevState =>({
        isOpened: !prevState.isOpened
      }));
      return false;
    }

    render(){
      var description = this.state.isOpened?this.props.description:'';

        return <a onClick={this.clickHandler} href="#" className="list-group-item list-group-item-action flex-column align-items-start">
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">{this.props.name}</h5>
          <small style={{marginRight:'50px', marginTop:'5px'}}>3 days ago</small>
        </div>
        <button type="button" className="close" aria-label="Close" style={{position:'absolute',top:'13px',right:'15px'}} >
          <span aria-hidden="true">&times;</span>
        </button>
        <p className="mb-1">{description}</p>
      </a>
    }
}

module.exports = Task;

[Антон Спирин]

KirylLapouski, скопировал ваш код и добавил входное свойство description в компонент. Все отлично работает.

[KirylLapouski]

Антон Спирин, Что может быть не так помимо самого реакта?

https://github.com/KirylLapouski/artezio1/tree/mas...

[Антон Спирин]

KirylLapouski, вы скажите, что у вас не работает? В консоли знаки !!! появляются?

[KirylLapouski]

Антон Спирин, Нет, не появляются.

[Антон Спирин]

KirylLapouski, консоль посмотрите. Может ошибки какие выпадают.

Answer 2

[KirylLapouski]

При рендеренге на сервере, к клиенту приходит обычный html, который ничего не знает про обработчики. Чтобы это исправить, надо к странице, которую отправляешь, написать тэг script, который содержит код прикрепления компонентов, как если бы рендерили на клиенте.