React JS

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

14 уроков Консультации Справочник Компилятор

/ Видеокурсы / Курс по 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

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