
#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 ();
}
}
}
Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Исходный код
Весь код будет доступен после подписки на проект!
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть