Antd中input密码输入框显示为星号
问题描述
项目中出现两个密码输入框，一个是登录界面，一个是弹框复核界面。
登录时如果选择浏览器保存登录名及密码，复核时会自动输入浏览器记录的登录名及密码，需求是复核时不自动填入浏览器所记住的登录密码
为何出现这个问题
input输入框type为password时，当浏览器保存一次之后，页面中所有的密码输入框都会被浏览器自动识别并填入。
为何解决这个问题
为了带给用户高度安全性，复核及重新校验密码时都是为了达到此操作是否为用户本人操作。防止登录之后出现他人操作安全级别较高的操作。
例如交易场景的提现等，需再次校验交易密码，以及对数据库有操作需要对操作员复核的场景等。
解决方案
input使用passsword一定会被浏览器自动处理，因此我们用text达到输入之后出现星号的问题。
项目建立在antd组件基础上。
页面输入框
<FormItemlabel="操作员口令"{...formItemLayout}>{getFieldDecorator('password', {{validator: this.pwdChange,}],})(<Input type="text"/>)}</FormItem>
validator是用来校验实时输入框中的值，也可用onChange进行*号设置。
pwdChange = (rule, value, callback) => {let realValue = this.state.realValue;// value是输入框的值，因此需要每次包之前的变*号之前的值保存到下来realValue = realValue+value.charAt(value.length-1)this.setState({realValue:realValue})const length = value.length;let str = ''for(var i =0;i<length;i++){str = str+'*'}this.props.form.setFieldsValue({//将输入框中值显示为为*号password: str,});callback()//validator中必需的回调}
By：Yl
