Урок #9 - Атрибуты refs
В этом уроке мы научимся делать ссылки на нужные нам объекты и в результате брать информацию прямиком из этих объектов. Так как мы не можем использовать id, то мы прибегнем к использованию специальных атрибутов - refs.
Видеоурок
Недавно вышло обновление, поэтому теперь необходимо создавать класс и его элементы по-новому. Теперь надо прописывать следующим образом:
class Task extends React.Component {
constructor(props) {
super(props);
this.state = {
edit: false,
};
};
edit = () => {
this.setState ({edit: true});
};
remove = () => {
alert ("Нажата кнопка удалить");
};
save = () => {
var value = this.refs.newTxt.value;
alert (value);
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 ref="newTxt" 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..
Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Исходный код
Весь код будет доступен после подписки на проект!Онлайн редактор кода
Загрузка...
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
