
#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 месяца
Также стоит посмотреть