Framework7 React弹窗内表单提交后输入值未清空问题咨询

核心原因 #

Framework7的Popup组件默认开启DOM缓存，关闭弹窗时不会销毁内部DOM节点，也不会触发子组件重挂载。如果表单没有做严格的受控绑定，或者仅在提交时清空状态，已经渲染到DOM上的旧输入值不会被同步清除，就会出现残留问题。

可落地解决方法 #

• 方案1：开启弹窗关闭销毁属性
  给Popup组件添加destroyOnClose属性，每次关闭弹窗都会自动销毁内部DOM，下次打开会重新渲染表单组件，默认使用初始空状态渲染，彻底避免残留。
  代码示例：

  import { Popup } from 'framework7-react';
  
  // 组件内使用
  <Popup 
    destroyOnClose={true}
    // 保留你原本的其他Popup属性
  >
    {/* 你的表单子组件 */}
  </Popup>
  

• 方案2：严格使用受控表单组件
  所有表单输入项都做双向绑定，value关联React状态，onChange/onInput事件实时同步状态，提交清空状态后DOM会自动同步更新为空值，不需要依赖弹窗销毁逻辑。
  代码示例：

  import { useState } from 'react';
  import { Input, Button } from 'framework7-react';
  
  function FormPopup() {
    const [username, setUsername] = useState('');
    const [desc, setDesc] = useState('');
  
    const handleSubmit = () => {
      // 原有提交逻辑
      // 清空状态
      setUsername('');
      setDesc('');
    }
  
    return (
      <>
        <Input 
          value={username} 
          onInput={(e) => setUsername(e.target.value)} 
          placeholder="请输入用户名"
        />
        <Input 
          value={desc} 
          onInput={(e) => setDesc(e.target.value)} 
          placeholder="请输入描述"
        />
        <Button onClick={handleSubmit}>提交</Button>
      </>
    )
  }
  

• 方案3：监听弹窗打开事件手动重置状态
  给Popup绑定onOpen回调，每次弹窗打开时主动重置所有表单状态，触发组件重渲染同步DOM值。
  代码示例：

  <Popup
    onOpen={() => {
      setUsername('');
      setDesc('');
    }}
    // 其他原有属性
  >
    {/* 表单组件 */}
  </Popup>
  

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