react如何去除input记忆
禁用输入框自动补全功能
在React中，可以通过设置autoComplete属性为off来禁用输入框的记忆功能。这是HTML5的标准属性，适用于大多数现代浏览器。
<input type="text" autoComplete="off" />使用随机生成的ID
某些浏览器会忽略autoComplete="off"，可以通过动态生成输入框的ID或名称来绕过浏览器的记忆功能。
<input
type="text"
id={Math.random().toString(36).substring(2)}
name={Math.random().toString(36).substring(2)}
/>表单级别禁用自动填充
对于整个表单，可以在表单元素上设置autoComplete="off"，这会阻止表单内所有输入框的自动填充。
<form autoComplete="off">
<input type="text" />
<input type="password" />
</form>使用非标准输入类型
对于密码输入框，可以使用type="text"配合autoComplete="new-password"来防止密码记忆。
<input
type="text"
autoComplete="new-password"
onFocus={(e) => e.target.type = 'password'}
/>动态修改输入框属性
通过组件挂载后动态修改输入框属性，可以更可靠地禁用自动填充功能。
useEffect(() => {
const input = document.getElementById('myInput');
if (input) {
input.setAttribute('autocomplete', 'off');
input.setAttribute('readonly', 'true');
setTimeout(() => input.removeAttribute('readonly'), 100);
}
}, []);使用CSS隐藏假输入框
某些浏览器会忽略JavaScript设置的属性，可以创建一个隐藏的假输入框来欺骗浏览器。
<div style={{height: 0, overflow: 'hidden'}}>
<input type="password" />
</div>
<input type="password" autoComplete="new-password" />这些方法可以根据具体需求和浏览器兼容性选择使用。现代浏览器通常对autoComplete="off"支持较好，但在某些特定情况下可能需要组合多种方法。
