Уроки 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» и передавать в него значение по-умолчанию. Также изменилась запись функций. Теперь их необходимо записывать следующим образом: handleCheck = () => {}.

Исходный код

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

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

Загрузка...

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

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

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

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

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

Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроков
Изучение таск-менеджера Gulp 4
5 уроков
Изучение библиотек jQuery
24 урока
Уроки Node JS и Express для начинающих
17 уроков
Изучение React JS / Redux библиотеки
9 уроков
Создание динамического веб сайта
22 урока
Комментарии для сайта Cackle