Уроки React JS

#6 - Отслеживание событий в React

#6 - Отслеживание событий в React

В уроке мы создадим несколько своих функций для отслеживания событий что делает пользователь. На основе отслеживания мы построим небольшую программу на React JS.

Видеоурок

Недавно вышло обновление, поэтому теперь необходимо создавать класс по новому. 


Так было раньше:

var Task = React.createClass ({
	edit: function () {
		alert ("Нажата кнопка редактировать");
	},
	
	remove: function () {
		alert ("Нажата кнопка удалить");
	},
	
	render: function () {
		return (
			<div className="box">
				<div className="text">{this.props.children}</div>
				<button onClick={this.edit} className="btn light">Редактировать</button>
				<button onClick={this.remove} className="btn red">Удалить</button>
			</div>
		);
	}
});
Теперь надо прописывать так:
class Task extends React.Component {
	edit() {
		alert ("Нажата кнопка редактировать");
	};
	
	remove() {
		alert ("Нажата кнопка удалить");
	};

	render() {
		return (
			<div className="box">
				<div className="text">{this.props.children}</div>
				<button onClick={this.edit} className="btn light">Редактировать</button>
				<button onClick={this.remove} className="btn red">Удалить</button>
			</div>
		);
	}
}

Исходный код

CSS код из урока
body {
  background-color: #e1e388;
}

.field {
  display: flex;
  padding: 10px;
  width: 25%;
  margin-left: 37.5%;
  color: #fff;
  font-size: 1.3em;
  flex-direction: column;
  align-items: center;
}

.box {
  border: 2px solid #aaa719;
  background-color: #d4d37f;
  margin-bottom: 20px;
  padding: 10px;
  width: 80%;
}

.box:last-child {
  margin-bottom: 0;
}

button.btn {
  margin-right: 10px;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 0.65em;
  color: #fff;
  outline: none;
}

.btn.light {
  background-color: #4eafc9;
  border: 2px solid #2a89a2;
}

.btn.red {
  background-color: #dda66d;
  border: 2px solid #b6821a;
}

.btn.light:hover {
  background-color: #2a89a2;
  border-color: #1d6f85;
}

.btn.red:hover {
  background-color: #b6821a;
  border-color: #946912;
}
Посмотреть остальной код можно после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Уроки Angular для начинающих
7 уроков
Изучение JavaScript от нуля до гуру
21 урок
Изучение React JS / Redux библиотеки
9 уроков
Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроков
Изучение таск-менеджера Gulp 4
5 уроков
Создание приложения на React JS / Использование API
7 уроков
Комментарии для сайта Cackle