reactjs组件不会在每次打开modal时调用
我正在模态对话框中显示表格数据,当我单击表格行编辑数据时,它将打开另一个模态对话框,在这里,我使用单击的reactjs组件不会在每次打开modal时调用,reactjs,material-ui,Reactjs,Material Ui,我正在模态对话框中显示表格数据,当我单击表格行编辑数据时,它将打开另一个模态对话框,在这里,我使用单击的componentWillMount()中的行id获取行数据。但当我关闭编辑模式对话框并尝试编辑其他表行时,将不会调用componentWillMount()。因此,“编辑模态”对话框为空。为什么componentWillMount不会每次调用?因为,Dialog组件只装载到dom中一次,然后在您关闭它之后,它变得不可见(通过将左侧位置更改为-10000px),但仍然存在于dom中 因此很明显
componentWillMount()中的行id获取行数据。但当我关闭编辑模式对话框并尝试编辑其他表行时,将不会调用componentWillMount()
。因此,“编辑模态”对话框为空。为什么componentWillMount
不会每次调用?因为,Dialog
组件只装载到dom中一次,然后在您关闭它之后,它变得不可见(通过将左侧位置更改为-10000px),但仍然存在于dom中
因此很明显,componentWillMount
和componentDidMount
方法将只被调用一次。如果要每次打开具有不同选项的对话框
组件,可以执行以下操作:
将ref保存到父组件中的对话框
组件实例:
ref={instance=>{this.RowDialog=instance}}
然后,您可以使用它handleOpen
方法打开对话框:
onRowClick=(事件)=>{
this.RowDialog.handleOpen();
}
我使用了以下步骤来修复它
我使用了{(this.state.open)?:null
第二步,卸载组件componentWillUnmount(){}
它可能仍挂装在后台,仅显示样式更改。请尝试使用不同的生命周期方法或提供一些代码以获得更详细的答案。向我们展示一些代码。感谢@NirH我使用生命周期修复了它。这可以完成一项工作,但与使用手动相比,每次卸载组件的性能更差leOpen()
带有新选项