Как очищать стейт в модальном окне при каждом открытии?

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

Предположим, у вас есть компонент Modal, который отображает модальное окно. Вы хотите очищать стейт компонента при каждом открытии модального окна.

import React, { useState, useEffect } from 'react';

const Modal = ({ isOpen }) => {
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    if (isOpen) {
      setInputValue(''); // очищаем стейт при открытии модального окна
    }
  }, [isOpen]);

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = () => {
    // обработка отправки формы
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default Modal;

В этом примере мы используем хук useState для создания стейта inputValue внутри компонента Modal. Затем мы используем хук useEffect, чтобы следить за изменением значения isOpen (которое отвечает за открытие и закрытие модального окна). Когда значение isOpen меняется, useEffect вызывается и очищает значение стейта inputValue, устанавливая его в пустую строку.

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

Обратите внимание, что в примере использована функциональная компонента. Если вы используете классовую компоненту, то очистку стейта можно осуществить в методе componentDidUpdate, проверяя изменение props.isOpen.