Javascript 关闭后如何清除模态中的反应状态？

我有一张产品卡片，上面有产品的详细信息。在底部，有一个“编辑”按钮

。单击
时，它会显示一个带有预填充的
输入
字段的模式，可以编辑然后保存。模式也可以在不保存的情况下关闭（但在编辑输入字段的情况下）

我的问题是，当用户编辑字段时，会关闭模式
（未保存），然后再次打开，字段未设置为初始值
值，但显示内容已更改

我尝试了一个初始状态的变量，然后在关闭后用它填充状态，但它不起作用。我也试着对裁判做出反应，但毫无乐趣

import React，{Component}来自“React”
从“反应模态”导入模态；
常量自定义样式={
...
};
Modal.setAppElement（“#根”）；
类AdminButtons扩展组件{
状态={
modalIsOpen:false，
}
componentDidMount（）{
const{id，inStock，name，price，type}=this.props.product
this.setState（{id，inStock，name，price，type}）
}
OpenModel=（）=>{
this.setState（{modalIsOpen:true}）；
}
AfterOpenModel=（）=>{
...
}
closeModal=（）=>{
this.setState（{modalIsOpen:false}）；
}
handleChange=（事件）=>{
const target=event.target
常量输入=目标值
const name=target.name
this.setState（{[name]：input}）
}
render（）{
const{product，remove}=this.props
const{modalIsOpen，name，inStock，price，type}=this.state
返回(
编辑
this.subtitle=subtitle}>你好
关闭
{this.props.product.name}
名称
因斯托克
价格
类型
{
this.props.edit（this.state）
this.closeModal（）}
}>保存更改
{product.isRemoved？
加：
移除（product.id）}>remove
}
)
}
}
您可以使用
组件willunmont
，React组件
生命周期

组件将卸载当您离开时，组件将被卸载
跑

例如：

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

此外，您还可以阅读有关React lifecycle和的更多信息。
如果来自输入的数据在您的组件中，您可以尝试以下方法：
在
closeModal
中，可以设置组件的初始状态


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

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

但是，如果输入的stat来自父组件，则需要一个新方法来重置父组件的数据，该数据可以作为回调添加到同一方法中

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

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

我不是这个解决方案的唯一创造者，但对于仍然了解这个问题的人来说，我觉得它与这个主题相关

我所做的是添加了一个名为useTimeout的新钩子变量，它本身非常易于使用，并将为您重置状态

将名为“hooks”的文件夹作为子文件夹添加到src文件夹中
在“hooks”文件夹中创建一个名为useTimeout.tsx的文件
复制粘贴下面的useTimeout代码

从“React”导入React；
导出函数useTimeout（回调：（）=>void，延迟：number | null |未定义）{
const timeoutRef=React.useRef（）；
const callbackRef=React.useRef（回调）；
//记住最近的回调：
//
//如果不这样做，如果更改回调，当setTimeout启动时，它将
//仍将调用您以前的回调。
//
//如果您将'callback'添加到useEffect的deps中，它将正常工作，但是
//超时将被重置。
React.useffect（（）=>{
callbackRef.current=回调；
}，[callback]）；
//设置超时：
React.useffect（（）=>{
如果（延迟类型=='number'）{
timeoutRef.current=window.setTimeout（（）=>callbackRef.current（），延迟）；
//如果卸载组件或延迟更改，则清除超时：
return（）=>window.clearTimeout（timeoutRef.current）；
}
return（）=>null；
}，[延迟]；
//如果要手动清除消费组件的超时…：
返回timeoutRef；
}
原始值仍应在道具中。因此，当模态关闭时，只需调用
this.componentDidMount（）
重置状态。如果再次打开，按save时会发生什么情况？值是否会保持不变？或者每次您关闭它时它都应该重置？它是
组件将卸载
，而OP不是卸载组件
componentDidMount
将在
render
之后装载，当您想从该
组件中取出时，将调用
componentwillunmount
。因此，如果您能在
componentDidMount
中处理这一点，您就是一名出色的开发人员；）@ChrisGcomponentWillUnmount在移除组件之前被调用，但是OP没有移除它。另外，我知道React生命周期是如何工作的：）您可以在任何时候自己调用这些方法，因为
componentDidMount
初始化状态以反映道具，再次调用它以重置状态应该可以正常工作。是的，这是真的，也许我不太理解这个问题！所以当你知道答案时，写下正确的答案！第二个建议奏效了。我把你的答案和@chris-g one结合起来了。我创建了一个单独的方法（clearInputFields）并将componentDidMount放在其中，它的工作原理如下