В этом уроке мы научимся отслеживать события в 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.