React中禁止chrome填充密码表单
Posted 清风晰心
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React中禁止chrome填充密码表单相关的知识,希望对你有一定的参考价值。
当 input 的 type="password" 时,chrome浏览器会以 type="password" 为标识记住输入的用户名和密码,
如果chrome用户选择记住密码,chrome会把输入过的用户名、密码填充到表单中;
在React中,以下2中方法都不能解决问题:
1.在表单前增加2个input并隐藏
<input type="text" style="display:none"/> <input type="password" style="display:none"/>
2.添加 autocomplete="off" 属性
<input type="password" autocomplete="off"/>
React不推崇Dom操作,通过state切换type的值来阻止浏览器的填充行为。
// 初始化state,组建初次渲染时type="text",浏览器不会对表单做填充行为
constructor(props) { super(props); this.state = { type: \'text\' }; } ... // 点击表单后,改变type changeType = () => { this.setState({ type: \'password\' }); } ... render() { return (
...
<Input type={this.state.type} onClick={this.changeType}/>
... ) }
以上是关于React中禁止chrome填充密码表单的主要内容,如果未能解决你的问题,请参考以下文章