Как очистить состояние реакции в модальном состоянии после закрытия?

Question

У меня есть карточка товара с указанием деталей товара. Внизу есть «правка» button. Когда clicked показывает модальное поле с предварительно заполненными полями input, которое можно отредактировать, а затем сохранить. Модал также можно закрыть без сохранения (но с измененными полями ввода) .

Моя проблема в том, что когда пользователь редактирует поля, затем закрывает модальное (без сохранения), а затем открывает его снова, поля не устанавливаются в исходное значение, но отображаются как измененные.

Я пробовал переменную с начальным состоянием, затем после закрытия заполнил состояние им, но она не работала. Пробовал реагировать реферами тоже, радости нет.

import React, { Component } from 'react'
import Modal from 'react-modal';

const customStyles = {
...
};

Modal.setAppElement('#root');

class AdminButtons extends Component {

    state = {
        modalIsOpen: false,
    }

    componentDidMount() {
        const { id, inStock, name, price, type } = this.props.product
        this.setState({ id, inStock, name, price, type })
    }

    openModal = () => {
        this.setState({ modalIsOpen: true });
    }

    afterOpenModal = () => {
        ...
    }

    closeModal = () => {
        this.setState({ modalIsOpen: false });
    }

    handleChange = (event) => {
        const target = event.target
        const input = target.value
        const name = target.name
        this.setState({ [name]: input })
    }

    render() {
        const { product, remove } = this.props
        const { modalIsOpen, name, inStock, price, type } = this.state
        return (
            <>
                <button onClick={this.openModal}>EDIT</button>
                <Modal
                    isOpen={modalIsOpen}
                    onAfterOpen={this.afterOpenModal}
                    style={customStyles}
                    contentLabel="Edit "
                >
                    <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
                    <button onClick={this.closeModal}>close</button>
                    <div>{this.props.product.name}</div>
                    <form>
                        <label>
                            Name
                            <input name="name" type="text" value={name} onChange={this.handleChange} />
                        </label>
                        <label>inStock
                            <input name="inStock" type="text" value={inStock} onChange={this.handleChange} />
                        </label>
                        <label>
                            Price
                            <input name="price" type="text" value={price} onChange={this.handleChange} />
                        </label>
                        <label>
                            Type
                            <input name="type" type="text" value={type} onChange={this.handleChange} />
                        </label>
                        <button onClick={ () => {
                            this.props.edit(this.state)
                            this.closeModal() }
                            }>Save changes</button>
                    </form>
                </Modal>
                {product.isRemoved ?
                    <button> add </button> :
                    <button onClick={() => remove(product.id)}>remove</button>
                }
            </>
        )
    }
}

Answer 1

Если данные от входов находятся в вашем компоненте, вы можете попробовать что-то вроде этого: В closeModal вы можете установить начальное состояние компонента

const initialState = { name: null, inStock: null, price: null, type:null }

closeModal = () => {
        this.setState({ 
         ...initialState,
         modalIsOpen: false 
        });
    }

Но если статистика входов равнаИсходя из Parent, вам нужен новый метод для сброса данных родительского компонента, который может быть добавлен как обратный вызов в том же методе.

const initialState = { name: null, inStock: null, price: null, type:null }

closeModal = () => {
        this.setState({ 
         modalIsOpen: false 
        }, () => {
        this.props.resetInputData();
      });
    }

Answer 2

вы можете использовать componentwillunmont, компонент React lifecycle.

componentwillunmount , когда вы выйдете из компонента, который будет запущен.

например:

componentwillunmount() {
   alert("do you want to exit?");
}

также вы можете прочитать больше о жизненном цикле React здесь и здесь .