Урок #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 месяца
