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

最新推荐文章于 2025-02-10 16:37:12 发布

Rattenking

最新推荐文章于 2025-02-10 16:37:12 发布

阅读量1.9k

点赞数 16

分类专栏： Taro React 入门到实战系列文章标签： taro react.js ios

本文链接：https://blog.youkuaiyun.com/m0_38082783/article/details/135103619

版权

Taro React 入门到实战系列专栏收录该内容

58 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Taro和React.js开发的微信小程序中，遇到iOS真机上Input密码框切换type时内容丢失的问题。通过分析原因并提出解决方案，建议使用两个Input组件分别对应password和text类型，避免因type切换导致的value丢失问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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] = use

了解本专栏