Уроки React JS

#11 - Удаление компонентов и обновление состояний

#11 - Удаление компонентов и обновление состояний

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

Видеоурок

Ниже приведен класс Field в новой ES6 разметке:

class Field extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			tasks: [
				'Необходимо купить молоко!',
				'Надо почистить зубы',
				'Просто отдохнуть'
			]
		};
	};

	deleteBlock = (i) => {
		var arr = this.state.tasks;
		arr.splice (i, 1);
		this.setState ({tasks: arr});
	};
	
	updateText = (text, i) => {
		var arr = this.state.tasks;
		arr[i] = text;
		this.setState ({tasks: arr});
	};
	
	eachTask = (item, i) => {
		return (
			<Task key={i} index={i}>
				{item}
			</Task>
		);
	};
	
	render() {
		return (
			<div className="field">
				{this.state.tasks.map (this.eachTask)}
			</div>
		);
	}
}

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

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

Исходный код

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

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

Загрузка...

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

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

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

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

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

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