Уроки React JS

#8 - Добавление состояния к объектам

#8 - Добавление состояния к объектам

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

Видеоурок

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


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

class Task extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			edit: false,
		};
	};

	edit = () => {
		this.setState ({edit: true});
	};

	remove = () => {
		alert ("Нажата кнопка удалить");
	};

	save = () => {
		this.setState ({edit: false})
	};
	
	rendNorm = () => {
		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>
		);
	};

	rendEdit = () => {
		return (
			<div className="box">
				<textarea defaultValue={this.props.children}></textarea>
				<button onClick={this.save} className="btn success">Сохранить</button>
			</div>
		);
	};
	
	render() {
		if (this.state.edit) {
			return this.rendEdit ();
		} else {
			return this.rendNorm ();
		}
	}
}
В новом ES6 лучше записывать все функции в новом формате, чтобы они выполнялись со сто процентной гарантией: edit = () => {}.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь код будет доступен после подписки на проект!

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

Загрузка...

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

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

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

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

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

Изучение библиотек jQuery
24 урока
Изучение таск-менеджера Gulp 4
5 уроков
Уроки Angular для начинающих
7 уроков
Создание приложения на React JS / Использование API
7 уроков
Уроки Vue.js для начинающих
10 уроков
Создание динамического веб сайта
22 урока
Комментарии для сайта Cackle