React JS

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

14 уроков 26 заданий Справочник Компилятор

/ Видеокурсы / Курс по React JS для начинающих / Урок #7 - State (Состояние)

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

JavaScriptReact JS

В этом уроке мы изучим состояния в 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 месяца!

JavaScriptReact JS

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