Как без хука useEffect сохранять состояние радиокнопок в LocalStorage в React?

В React, стандартным способом сохранения состояния компонента является использование хуков, таких как useState и useEffect. Однако, если вы хотите сохранить состояние радиокнопок в LocalStorage без использования хука useEffect, можно воспользоваться классовым компонентом и методами жизненного цикла.

Вот пример реализации:

import React, { Component } from "react";

class RadioButtons extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: localStorage.getItem("selectedOption") || ""
    };
  }

  handleOptionChange = (e) => {
    const selectedOption = e.target.value;
    this.setState({ selectedOption });
    localStorage.setItem("selectedOption", selectedOption);
  };

  render() {
    const { selectedOption } = this.state;

    return (
      <div>
        <label>
          <input
            type="radio"
            value="option1"
            checked={selectedOption === "option1"}
            onChange={this.handleOptionChange}
          />
          Option 1
        </label>
        <label>
          <input
            type="radio"
            value="option2"
            checked={selectedOption === "option2"}
            onChange={this.handleOptionChange}
          />
          Option 2
        </label>
        <label>
          <input
            type="radio"
            value="option3"
            checked={selectedOption === "option3"}
            onChange={this.handleOptionChange}
          />
          Option 3
        </label>
      </div>
    );
  }
}

export default RadioButtons;

В этом примере мы создаем классовый компонент RadioButtons с начальным состоянием selectedOption, которое будет браться из LocalStorage с помощью localStorage.getItem(). Если в LocalStorage нет сохраненного значения, используется пустая строка.

Метод handleOptionChange вызывается при изменении выбранной радиокнопки. Он обновляет состояние selectedOption с помощью this.setState() и сохраняет новое значение в LocalStorage с помощью localStorage.setItem().

В функции render() мы отображаем радиокнопки и устанавливаем состояние checked для выбранной радиокнопки, основываясь на значении selectedOption. При изменении выбора вызывается метод handleOptionChange.

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