@KirylLapouski

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

Есть такой компонент
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;

Но когда отрендерил элемент обработчика не увидел.
5a82ad24694b7711482051.png
Что не так?
  • Вопрос задан
  • 94 просмотра
Пригласить эксперта
Ответы на вопрос 1
  • rockon404
    @rockon404
    Frontend Developer
    А с чего вы взяли что он там должен быть? Вам, думаю, стоит подтянуть основы 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
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы