Уроки React JS

Урок #7 - State (Состояние)

Урок #7 - State (Состояние)

В этом уроке мы изучим состояния в React JS (State). Состояния очень схожи со свойствами, но у них есть одно гигантское отличие. Состояния, в отличии от свойств, мы можем изменять в ходе работы на сайте, свойства такого делать не могут.

Видеоурок

Недавно вышло обновление, поэтому теперь необходимо создавать класс и его элементы по-новому. Вот как было раньше:
var Check = React.createClass ({
  getInitialState: function () {
    return {checked: true}
  },
  handleCheck: function () {
    this.setState ({checked: !this.state.checked})
  },
  render: function () {
    var message;
    if (this.state.checked) {
      message = 'выбран';
    } else {
      message = 'не выбран';
    }
    return (
      <div>
        <input type="checkbox" onChange={this.handleCheck} defaultChecked={this.state.checked} />
        <p>Чекбокс {message}</p>
      </div>
    );
  }
});
Теперь же надо прописывать следующим образом:
class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true,
    };
  };
  handleCheck = () => {
    this.setState({checked: !this.state.checked});
  };
  render() {
    var message;
    if (this.state.checked) {
      message = 'выбран';
    } else {
      message = 'не выбран';
    }
    return (
      <div>
        <input type="checkbox" onChange={this.handleCheck} defaultChecked={this.state.checked} />
        <p>Чекбокс {message}</p>
      </div>
    );
  }
}
В новом ES6 необходимо создавать конструктор вместо getInitialState и передавать в него значение по умолчанию (props). Также изменилась запись функций. Теперь их необходимо записывать следующим образом: handleCheck = () => {}.

Исходный код

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

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

Загрузка...

Задание к уроку

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

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

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

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

Изучение JavaScript: от нуля и до создания сайта
Изучение таск-менеджера Gulp 4
5 уроков
Изучение React JS / Redux библиотеки
9 уроков
Создание динамического веб сайта
22 урока
Уроки Angular для начинающих
7 уроков
Уроки Vue.js для начинающих
10 уроков
Комментарии для сайта Cackle