react 表单如何清除缓存
清除 React 表单缓存的常用方法
使用 defaultValue 或 value 结合状态管理
通过受控组件的方式管理表单值，当需要清除时直接重置状态。例如：
const [inputValue, setInputValue] = useState('');
const handleReset = () => {
setInputValue(''); // 重置状态
};
return (
<form>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={handleReset}>清除</button>
</form>
);利用 key 属性强制重新渲染
通过修改表单组件的 key 值触发重新渲染，从而清除内部缓存：
const [formKey, setFormKey] = useState(0);
const handleReset = () => {
setFormKey(prevKey => prevKey + 1); // 改变 key 值
};
return (
<form key={formKey}>
<input defaultValue="" />
<button onClick={handleReset}>清除</button>
</form>
);使用 ref 直接操作 DOM
对于非受控组件，可通过 ref 直接清空输入值：
const inputRef = useRef(null);
const handleReset = () => {
if (inputRef.current) {
inputRef.current.value = ''; // 直接操作 DOM
}
};
return (
<form>
<input ref={inputRef} defaultValue="" />
<button onClick={handleReset}>清除</button>
</form>
);结合表单库的清除方法
若使用如 Formik 或 React Hook Form 等库，调用其内置重置方法：
-
React Hook Form 示例：
const { register, reset } = useForm(); return ( <form> <input {...register("fieldName")} /> <button onClick={() => reset()}>清除</button> </form> ); -
Formik 示例：
<Formik initialValues={{ fieldName: '' }} onSubmit={(values, { resetForm }) => { resetForm(); // 调用重置方法 }} > {/* ... */} </Formik>
清除浏览器自动填充缓存
针对浏览器自动填充的顽固缓存，可通过以下方式解决：
- 添加
autocomplete="off"属性：<input type="text" autoComplete="off" /> - 使用随机
name或id属性干扰浏览器记忆：<input name={`random-${Date.now()}`} />
注意事项
- 受控组件方式更符合 React 设计模式，推荐优先使用。
- 直接操作 DOM 可能引发状态不一致问题，需谨慎使用。
- 表单库的内置方法通常能处理更复杂的场景（如验证状态清除）。
