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

Урок #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

Рекомендуемые курсы