AntmJS / vantui

基于vant-weapp实现的Taro-React版及H5-React版组件库https://antmjs.github.io/vantui/#/home
https://antm-js.gitee.io/vantui/#/home
MIT License
741 stars 97 forks source link

Field 密码输入,切换 text/pasword 展示有问题 #528

Closed diamont1001 closed 1 year ago

diamont1001 commented 1 year ago

这个 Issue 涉及以下平台:

BUG 描述

<Field
  value={this.state.inputPassword}
  onChange={(e) => this.setState({inputPassword: e.detail})}
  type={this.state.showPassword ? 'text' : 'password'}
  label='密码'
  leftIcon='shield-o'
  placeholder='请输入密码'
  icon='eye-o'
  onClickIcon={() => this.setState({ showPassword: !this.state.showPassword})}
/>

如上面代码,用于密码输入,右边ICON点击可以切换密码是否可见,输入完密码后点击切换成 text 类型,UI上会清空输入内容,但其实 this.state.inputPassword 没被清空,再点击输入框后会显示出来。

复现步骤

期望结果

实际结果

截图

环境

"@antmjs/vantui": "^3.0.5",
"@tarojs/taro": "3.6.8",

附加信息

diamont1001 commented 1 year ago

可能是我使用的问题,刚调整了下,使用 password 属性就好了,具体:

type='text'
password={!this.state.showPassword}