Taro React组件使用（5） —— RuiPasswordInput 密码输入框显示隐藏和清空

1. 需求场景分析

1. 实现密码输入框密码和输入文本的切换显示；
2. 实现一键清空输入框；
3. 对 input 标签的样式修改；
4. onInput 对 value 值改变的输出。

2. 组件预览

3. 需求实现

1. 密码输入框的文本显示切换采用 input 的 type 属性，切换 password 和 text 值，实现文本的显示和加密；
2. 输入文本的一键清空，直接采用 useState 返回的更新属性函数实现清空；
3. 样式的传入显示采用 classNames 库来实现 className 的组合。

4. 解决已销毁组件状态更新的报错

1. 【useUnmounted】使用 useEffect 监听页面销毁；
2. 【useAsyncState】实现【对已销毁组件进行状态更新的阻止】。

import { useCallback, useEffect, useRef, useState } from 'react';

export function useUnmounted() {
  const unmountedRef = useRef(false);
  useEffect(() => {
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return