Урок #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 месяца
