React JS

Курс по React JS для начинающих

14 уроков Консультации Справочник Компилятор
/ Видеокурсы / Курс по React JS для начинающих / Урок #9 - Атрибуты refs

Урок #9 - Атрибуты refs

Урок #9 - Атрибуты refs


JavaScriptReact JS

В этом уроке мы научимся делать ссылки на нужные нам объекты и в результате брать информацию прямиком из этих объектов. Так как мы не можем использовать 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..

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

react_form.zip Необходима подписка!

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

Исходный код

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

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

Загрузка...

Домашнее задание

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

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

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

JavaScriptReact JS

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