【taro react】---- 解决 iOS 真机微信小程序 Input 密码框 type 切换会导致 Input 内容丢失问题

这篇具有很好参考价值的文章主要介绍了【taro react】---- 解决 iOS 真机微信小程序 Input 密码框 type 切换会导致 Input 内容丢失问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 问题场景

在密码登陆时,有显示和隐藏密码的功能,实现方式很简单,直接对输入 input 的 type 进行 password 和 text 值进行切换,就可以实现密码的显示和隐藏。文章来源地址https://www.toymoban.com/news/detail-778080.html

2. 实现代码

  1. 通过修改 input 的 type 值实现密码的显示和隐藏。
  2. 密码的显示和隐藏控制图标也是通过 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

到了这里,关于【taro react】---- 解决 iOS 真机微信小程序 Input 密码框 type 切换会导致 Input 内容丢失问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 - 完美去除 <scroll-view> 滚动条,保证 100% 去掉隐藏苹果 ios 系统、安卓滚动条(解决 ios 苹果真机scroll-view无法隐藏滚动条)详细示例代码,保证可用

    关于微信小程序去掉 scroll-view 滚动条的教程中,全都是只能去掉安卓系统手机滚动条,而苹果手机则无法去掉。 本文 实现了在微信小程序中,强力去除 scroll-view 组件滚动条,保证去除苹果ios系统和安卓手机的滚动条, 您可以自由的将本文的去除代码应用到 “局部 / 全局”

    2024年02月11日
    浏览(69)
  • 基于Taro + React 实现微信小程序半圆滑块组件、半圆进度条、弧形进度条、半圆滑行轨道(附源码)

    1、四个档位 2、可点击加减切换档位 3、可以点击区域切换档位 4、可以滑动切换档位 给大家提供一些实现思路,找了一圈,一些文章基本不能直接用,错漏百出,代码还藏着掖着,希望可以帮到大家 ts的写法风格 index.tsx      index.module.less 防抖的工具函数debounce 的详细代码

    2024年02月06日
    浏览(59)
  • 微信小程序真机调试请求失败的解决

    微信小程序在电脑上一切正常,请求成功,但是在真机调试上请求失败,报错,是因为电脑和手机内网ip不同的问题 把请求地址改为本机局域网ip地址,手机和电脑连同一个局域网,就不会报错了 如果手机上还是获取不到数据,那就需要把电脑的防火墙关闭,这样就可以了

    2024年02月11日
    浏览(49)
  • 微信小程序真机调试技巧,解决各种疑难杂症

    也许你调试的时候,会使用到真机调试或者预览模式或者体验版模式,这些模式都有可能出现意想不到的bug问题,这时候调试模式就非常非常重要了,特别是给领导看的时候,在领导手机上出现bug了,这时候你是不是非常紧张非常不安,别慌,打开小程序的调试模式: 在小程

    2024年02月04日
    浏览(88)
  • 微信小程序真机不显示图片【三个解决方案】

    今天网友在开发小程序中遇见一个很奇怪的问题,就是编辑器编译后可以正常显示项目图片,但是当真机预览时却不显示图片。针对这个问题经过对比、尝试算是找到了问题的原因。下面将最近真机不显示的情况进行一下汇总: 1.本地图片文件名称中包含中文: 像上面图片,

    2024年02月12日
    浏览(116)
  • 解决微信小程序真机测试出现errno:600001错误

    报错如下: 小程序真机调试报错问题:VM1096: Unhandled promise rejection {errno: 600001, errMsg: \\\"request:fail -102:net::ERR_CONNECTION_REFUSED}   原因如下: 1、token太长 2、域名的证书链有问题,请检查你的域名的证书链。 本人项目出现的情况是原因2。 打开域名链接,显示如下: 接下来,处理

    2024年02月11日
    浏览(88)
  • 【微信小程序|Debug】解决微信小程序真机预览无法访问PC端localhost:8080端口问题

    Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,有幸拿过一些国奖、省奖…已保研。 学习经验:扎实基础 + 多做笔记 +

    2024年02月09日
    浏览(49)
  • 微信小程序真机调试异常cmdId 1006, errCode-50011-已解决

    cmdId 1006, errCode-50011 小程序在模拟器上预览没问题,真机调试和体验版首页打不开,点展开显示cmdId 1006, errCode-50011 查了下1006, 说是广告, 我没接广告,这个也不是错误码 1006 广告组件被驳回 你的广告正在被审核,无法展现广告 后来找到几个类似的帖子,得到了些启发  这

    2024年02月12日
    浏览(38)
  • 微信小程序使用本地图片在真机预览不显示的问题解决

    开发工具上本地图片可以显示,但是在真机上预览的时候不能显示 通常我们代码路径是代码是这样写的 最后发现路径这样写在真机预览上无法显示 解决办法 路径需要相对于根目录来写 路径直接使用网络图片地址写 这样就可以解决真机预览图片不显示问题了。 如果路径没有

    2024年02月11日
    浏览(122)
  • 微信小程序+MQTT(emqx)+Ngnix解决真机调试持续重新连接问题

       最近想用微信小程序订阅MQTT的消息,但是想要用MQTT,微信小程序不允许用ip去连接,必须用经过备案的域名,然后就开始了艰辛的合法域名探索之路。   我现在申请的是阿里云的免费域名,1年。实际上付费的也不贵,每年几十块的也有。详细教程参考阿里云的官方教

    2024年02月03日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包