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}/>

　　　 ...
 ) }