React JS

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

/ Видеокурсы / Курс по React JS для начинающих / Урок #8 - Добавление состояния к объектам

Урок #8 - Добавление состояния к объектам

JavaScriptReact JS

Мы уже научились работать с состояниями, теперь осталось прикрепить их к нашему приложению. В этом уроке мы как раз это и сделаем. Теперь наше приложение будет иметь больше функций, что положительно скажется на самой программе.

Видео урок:

Недавно вышло обновление, поэтому теперь необходимо создавать класс и его элементы по-новому. Теперь надо прописывать следующим образом:

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 = () => {}.

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

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

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

Исходный код

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

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

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

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

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

JavaScriptReact JS

Предыдущий Следующий