Javascript antd中是否有任何解决方案可用于检查组件中未保存的更改？

我有一个名为

MyModal

的通用组件，它用于我的web应用程序中的近20多个组件，我使用ant-d modal。现在我必须检查

MyModal

中的子组件内部是否有任何未保存的更改：如果有，则提示用户。我可以使用一个新状态逐个检查每个子组件，但我不想这样做，我希望它从一个组件即MyModal组件精确可控

如何检查子组件中的状态更改（在

MyModal

中呈现）

---

我的代码结构 MyModal.js

import React，{Component}来自“React”
从“antd”导入{Modal}
类MyModal扩展组件{
render（）{
返回(
{this.props.children}
)
}
}
导出默认MyModal

ChildComponent.js

import React，{Component}来自“React”
从“antd”导入{Input，Button}
从“../components/MyModal”导入MyModal
类ChildComponent扩展组件{
此.state={
值：“”，
可见：假，
};
onChangeValue=e=>this.setState（{value:e.target.value}）；
toggleModal=（）=>this.setState（{visible:！this.state.visible}）；
handleOk=（）=>警报（'hello world！'）
render（）{
const{visible，value}=this.state
返回(
开放模态
{/*这是一个示例组件，向您展示我的问题，有
还有更多的字段和状态。*/}
)
}
}
导出默认子组件

我已经读过这篇文章&这不是我的设想。我的场景是，无论何时关闭一个模态，它都应该检查子组件内部是否存在任何未保存的更改。我可以在使用MyModal的每个子组件中执行此操作，但我不希望使用该方法，我希望它像从父组件检查一样简单（即MyModal）不是通过子组件。我认为没有办法做到这一点，除非您愿意引入某种回调，在子组件处于未保存状态时通知家长。React路由器有防止导航的方法，但它需要使用标准来执行。这样做，这同样意味着回调将更新某种状态。

import React, { Component } from 'react'
import { Modal } from 'antd'
    
class MyModal extends Component {
  render() {
    return (
      <Modal {...this.props}>
        {this.props.children}
      </Modal>
    )
  }
}

export default  MyModal

import React, { Component } from 'react'
import { Input, Button } from 'antd'
import MyModal from '../components/MyModal'
    
class ChildComponent extends Component {
  this.state = {
    value: '',
    visible: false,
  };

  onChangeValue = e => this.setState({ value: e.target.value });
  toggleModal = () => this.setState({ visible: !this.state.visible });
  handleOk = () => alert('hello world!')

  render() {
    const { visible, value } = this.state
    return (
      <div>
        <Button onClick={this.toggleModal}>
          Open Modal
        </Button>
        <MyModal visible={visible} onClose={this.toggleModal} footer={[
            <Button key="back" onClick={this.toggleModal}>
              Return
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
        <Input value={value} onChange={this.onChangeValue} />
        {/* this is an example component to show you my problem, there are 
            a lot of more fields and states too. */}
      </MyModal>
    )
  }
}

export default  ChildComponent