1. 程式人生 > >React中禁止chrome填充密碼表單

React中禁止chrome填充密碼表單

阻止 click complete pro 方法 gety 2個 () 如果

當 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填充密碼表單