【taro react】---- 解决 iOS 真机微信小程序 Input 密码框 type 切换会导致 Input 内容丢失问题
2023-12-20 16:29:27
1. 问题场景
在密码登陆时,有显示和隐藏密码的功能,实现方式很简单,直接对输入 input 的 type 进行 password 和 text 值进行切换,就可以实现密码的显示和隐藏。
2. 实现代码
- 通过修改 input 的 type 值实现密码的显示和隐藏。
- 密码的显示和隐藏控制图标也是通过 type 值进行判断显示对应图标。
import { View, Input, Image } from '@tarojs/components';
import { useAsyncState } from '@utils/event';
import licon from '@utils/icon/licon';
import api from '@utils/api';
import './index.scss';
const RuiPasswordInput = (props) => {
let {
placeholder,
value = '',
type = 'password'
} = props;
let [new_value, setnew_value] = useAsyncState(value);
let [new_type, setnew_type] = useAsyncState(type);
return <View className='rui-password-input-temp-content rui-fg rui-flex-ac'>
<View className='rui-fg rui-flex-ac'>
<Input
v
文章来源:https://blog.csdn.net/m0_38082783/article/details/135103619
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!