React中如何清空含Popup子组件的动态表单输入值？

核心原因：绝大多数Popup组件默认开启了DOM缓存逻辑，仅通过显隐属性控制展示/隐藏时，组件实例不会销毁，内部自行维护的表单状态不会跟随父组件的状态清空操作自动重置。

可行解决方案 #

• 方案1：控制组件挂载销毁
  不要仅用visible/show属性控制Popup显隐，在显隐状态为false时直接不渲染组件。Vue示例：v-if="showPopup"；React示例：{showPopup && <PopupForm />}。每次打开Popup都会生成全新的组件实例，表单默认自动恢复初始空状态。
• 方案2：绑定动态key强制重渲染
  如果你需要保留Popup的显隐动画不想销毁重建，可以给内部的表单组件绑定动态key，每次打开Popup时更新key值（比如绑定自增的打开次数变量key={popupOpenCount}），触发组件强制重渲染完成表单重置。
• 方案3：主动调用子组件清空方法
  在Popup子组件内封装表单重置方法并暴露给父组件：Vue中用defineExpose暴露resetForm方法，父组件通过子组件ref调用；React中用useImperativeHandle暴露方法，父组件通过ref调用。提交表单成功/关闭Popup时主动调用该方法即可清空内部数据。
• 方案4：关闭Popup的DOM缓存配置
  如果你使用的是第三方UI库的Popup组件，可以检查组件参数，开启关闭后销毁的配置，比如Framework7的Popup设置destroyOnClose: true，关闭后会自动销毁实例，不会残留历史表单数据。

注意事项 #

如果子组件的表单状态是内部自行维护、没有和父组件传入的props做双向绑定，父组件单方面清空自身状态不会同步到子组件，必须通过上述方案主动触发子组件的表单重置逻辑。

内容的提问来源于stack exchange，提问作者Vitalie Jalbu