React JS: Уроки состояний для начинающих

Что такое состояния и зачем они нужны?

Рассмотрим пример. Есть метод handleClick, срабатывающий при нажатии на поле ввода. Внутри метода выводится информация в консоль. Также есть переменная внутри класса, значение которой изменяется, например, на «Changed». Логически, при каждом нажатии значение переменной должно меняться, а вместе с ним и отображаемый текст. Однако, на практике, текст на странице не изменяется, хотя значение переменной меняется корректно. Это происходит потому, что изменение переменной не отражается на странице автоматически. Для динамического изменения переменных на веб-странице используются состояния.

Работа с состояниями

Для работы с состояниями необходимо создать конструктор в классе. Конструктор — функция, вызываемая автоматически при создании объекта. В конструкторе:

Вызывается конструктор родительского класса с помощью super(). В него передаются свойства, передаваемые в компонент. Эта строка необходима согласно официальной документации.
Создаются состояния с помощью this.state. state — аналог props, но содержит состояния, динамически изменяющие значения на странице. Состояния объявляются в виде объекта:
```
this.state = {
    helpText: 'help text'
};
```
Можно создать множество состояний.

Вывод и обновление состояний

Для вывода состояния, вместо обращения к переменной (например, helpText), нужно обращаться к this.state.helpText. При попытке сохранить код после изменения вывода может возникнуть ошибка, связанная со свойствами. Это происходит из-за того, что в component необходимо передать props в конструктор родительского класса. Пример корректного componentDidMount:

componentDidMount(){
    this.inputClick = this.inputClick.bind(this)
    this.inputClick()
}

Для изменения состояния используется метод setState. Нельзя напрямую изменять this.state.helpText. Вместо этого:

this.setState({
    helpText: 'Changed'
});

Если используется изменение состояний в собственных методах, в конструкторе необходимо добавить:

this.inputClick = this.inputClick.bind(this);

Теперь handleClick сможет взаимодействовать с состояниями.

Получение данных от пользователя

Создадим состояние для данных пользователя, например, userData:

this.state = {
    userData: ''
};

Добавим поле input и обработчик события onChange:

<input type="text" onChange={event => this.setState({userData: event.target.value})} />

Теперь при каждом изменении значения в поле ввода, состояние userData будет обновляться, и эти данные будут динамически отображаться на странице.

В этом уроке мы научились работать с состояниями в React, что позволяет динамически изменять контент веб-страницы. Состояния — мощный инструмент для создания интерактивных интерфейсов.