React JS: Урок 6 — Обработка событий и создание ToDo списка

В этом уроке мы научимся отслеживать события в React JS и создадим приложение «Список дел» с кнопками «Редактировать» и «Удалить». В этом уроке мы сосредоточимся на обработке нажатий на кнопки; реализацию редактирования и удаления оставим на последующие уроки.

Атрибут className

В React JS для добавления классов используется атрибут className, а не class (зарезервированное слово JavaScript). Пример: <div className="Field">. В этом уроке используется CSS-файл (ссылка на itproger.com в описании).

Компонент Task

Создадим компонент Task для отображения элементов списка:

React.createClass({
  render: function() {
    return (
      <div className="block">
        <input type="text" />
        <button className="button">Редактировать</button>
        <button className="button red">Удалить</button>
      </div>
    );
  }
});

Компонент содержит текстовое поле и кнопки «Редактировать» и «Удалить.

Обработка нажатий на кнопки

Создадим функции Edit и Remove для обработки нажатий:

Edit: function() {
  alert('Нажата кнопка редактировать');
},
Remove: function() {
  alert('Нажата кнопка удалить');
}

Вызовем функции через атрибут onClick:

<button className="button" onClick={this.Edit}>Редактировать</button>
<button className="button red" onClick={this.Remove}>Удалить</button>

Нажатия на кнопки вызовут alert-сообщения. Обратите внимание на правильное размещение запятых.

Динамическое отображение данных

Для динамического отображения используем свойства компонента props:

<div className="block">
  {this.props.children}
  <button className="button" onClick={this.Edit}>Редактировать</button>
  <button className="button red" onClick={this.Remove}>Удалить</button>
</div>

this.props.children выведет содержимое тега, содержащего компонент Task.

Пример:

<Task>Мой Task</Task>
<Task>Task Number</Task>
<Task>Hello world</Task>

Мы освоили основы отслеживания событий в React, создали компонент для списка дел и обработали нажатия на кнопки. В следующих уроках добавим функционал редактирования и удаления, а также изучим состояние в React.

Что будем искать? Например,программа