1. 需求场景分析
- 实现密码输入框密码和输入文本的切换显示；
- 实现一键清空输入框；
- 对 input 标签的样式修改；
- onInput 对 value 值改变的输出。
2. 组件预览
3. 需求实现
- 密码输入框的文本显示切换采用 input 的 type 属性，切换 password 和 text 值，实现文本的显示和加密；
- 输入文本的一键清空，直接采用 useState 返回的更新属性函数实现清空；
- 样式的传入显示采用 classNames 库来实现 className 的组合。
4. 解决已销毁组件状态更新的报错
- 【useUnmounted】使用 useEffect 监听页面销毁；
- 【useAsyncState】实现【对已销毁组件进行状态更新的阻止】。
import { useCallback, useEffect, useRef, useState } from 'react';
export function useUnmounted() {
const unmountedRef = useRef(false);
useEffect(() => {
return () => {
unmountedRef.current = true;
};
}, []);
return
