react 表单如何清除缓存

清除 React 表单缓存的方法

使用 defaultValue 而非 value
对于非受控组件，通过 defaultValue 设置初始值而非 value，避免 React 保留旧值。表单提交后，直接操作 DOM 重置表单：

<input type="text" defaultValue="" ref={inputRef} />
// 提交后调用
inputRef.current.value = '';

手动重置受控组件状态
受控表单需将输入值绑定到状态变量。提交后通过设置状态为空值来清除：

const [inputValue, setInputValue] = useState('');
const handleSubmit = () => {
  // 提交逻辑
  setInputValue(''); // 重置状态
};
return <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />;

利用 key 属性强制重新渲染
通过改变 key 值使 React 重新创建组件实例，适用于复杂表单：

const [formKey, setFormKey] = useState(0);
const resetForm = () => setFormKey(prev => prev + 1);
return <Form key={formKey} />; // 调用 resetForm 即可重置

使用表单库的 reset 方法
若使用 react-hook-form 等库，直接调用内置重置函数：

const { register, handleSubmit, reset } = useForm();
const onSubmit = () => {
  reset(); // 清除所有字段
};

清除浏览器自动填充
添加 autocomplete="off" 到表单或输入框，但现代浏览器可能忽略。可尝试动态生成随机属性：

<input autoComplete="new-password" /> // 针对密码字段
<form autoComplete="off">...</form>