#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» и передавать в него значение по-умолчанию. Также изменилась запись функций. Теперь их необходимо записывать следующим образом:
handleCheck = () => {}.Исходный код
Весь код будет доступен после подписки на проект!Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть
Комментарии
