Состояние в React: Добавление и инициализация

Инициализация состояния

В этом примере мы добавим кнопку «Редактировать» к существующему приложению. При нажатии на кнопку появится текстовое поле для ввода информации. Поскольку информация динамически изменяется, нам потребуется состояние, а не свойства объекта.

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

function getInitialState() {
  return {
    edit: false 
  };
}

Здесь создаётся объект состояния edit, имеющий значение false по умолчанию. Это означает, что редактирование отключено при загрузке страницы.

Управление состоянием

Создадим две функции: edit и save для управления состоянием.

Функция edit устанавливает состояние edit в true:

function edit() {
  this.setState({ edit: true });
}

Функция save устанавливает состояние edit в false:

function save() {
  this.setState({ edit: false });
}

Таким образом, приложение запускается с отключенным редактированием (false). Нажатие на «Редактировать» включает редактирование (true), а нажатие на «Сохранить» отключает его (false).

Отображение в зависимости от состояния

В режиме редактирования необходимо отображать текстовое поле вместо кнопок «Редактировать» и «Сохранить. Создадим две функции рендеринга: renderNorm и renderEdit.

Функция renderNorm отображает начальный вид:

function renderNorm() {
  // ... (здесь код отображения начального вида) ...
}

Функция renderEdit отображает вид в режиме редактирования:

function renderEdit(props) {
  return (
    <div>
      <input type="text" value={props.me} />
      <button className="button-success">Сохранить</button>
    </div>
  );
}

В методе render добавим проверку состояния:

render() {
  return (
    <div>
      {this.state.edit ? this.renderEdit() : this.renderNorm()}
    </div>
  );
}

Если this.state.edit равно true, отображается renderEdit, иначе — renderNorm. В Main.css (файл стилей) определены стили для кнопки «Сохранить».

Результат

Теперь при нажатии на «Редактировать» появляется текстовое поле, а при нажатии на «Сохранить» оно исчезает. Функционал переключения режимов работает корректно. Сохранение данных пока не реализовано, это будет рассмотрено в следующем уроке.