React+TS前台项目实战(十九)-- 全局Input组件封装:加载状态和清除功能的实现

文章目录

  • 前言
  • Input组件
    • 1. 功能分析
    • 2. 代码+详细注释
    • 3. 使用方式
    • 4. 效果展示
  • 总结


前言

今天我们来封装一个input输入框组件,并提供一些常用的功能,你可以选择不同的 尺寸添加前缀显示加载状态触发回调函数自定义样式 等等。这些功能在这个项目中已经足够了,无论你是一个经验丰富的开发者还是一个刚刚入门的新手,这篇文章都将提供有用的知识和实践经验,以帮助你在自己项目中封装输入框时更加高效


Input组件

1. 功能分析

(1)通过传入loading加载状态属性,当激活时会显示加载图标
(2)通过传入size属性, 可以有不同的大小:“default”、“small” 或 “large”
(3)提供onChange值发生变化回调函数;失去焦点onBlur回调函数;键盘回车onKeyUp回调函数;
(4)当输入框有值时,组件会显示一个清除按钮,用户可以通过点击按钮来清除输入框的值
(5)通过传入className属性, 可以自定义输入框的样式
(6)通过 elprops 属性将其他属性传递给底层的 input 元素

2. 代码+详细注释

// @/components/Input/index.tsx
import { FC, ReactNode, useCallback, useState, ChangeEventHandler, FocusEvent, ComponentPropsWithoutRef, KeyboardEventHandler } from "react";
import classNames from "classnames";
import { InputContainer } from "./styled";
import { ReactComponent as SearchIcon } from "./assets/search.svg";
import { ReactComponent as LoadingIcon } from "./assets/loading.svg";
import { ReactComponent as ClearIcon } from "./assets/clear.svg";
import SimpleButton from "@/components/SimpleButton";

// 组件的属性类型
type Props = Omit<ComponentPropsWithoutRef<"input">, "size"> & {
  // 按下回车的回调
  onEnter?: () => void;
  // 是否显示加载状态
  loading?: boolean;
  // 输入框大小
  size?: "default" | "small" | "large" | undefined;
  // 输入框前缀
  prefix?: boolean | ReactNode;
};

// 输入框组件
const Input: FC<Props> = ({ loading, size, onEnter, value: propsValue, onChange: propsOnChange, onKeyUp: propsOnKeyUp, onBlur: propsOnBlur, className, ...elprops }) => {
  // 输入框的值,通过状态管理
  const [value, setValue] = useState(propsValue);

  // 输入事件
  const handlerChange: ChangeEventHandler<HTMLInputElement> = useCallback(
    (event) => {
      // 如果正在加载,直接返回
      if (loading) {
        return;
      }
      // 更新状态和回调
      setValue(event.target.value);
      propsOnChange?.(event);
    },
    [propsOnChange, setValue, loading]
  );

  // 回车事件
  const onKeyUp: KeyboardEventHandler<HTMLInputElement> = useCallback(
    (event) => {
      // 如果是回车键,触发回调
      const isEnter = event.keyCode === 13;
      if (isEnter) {
        onEnter?.();
      }
      propsOnKeyUp?.(event);
    },
    [onEnter, propsOnKeyUp]
  );

  // 失去焦点事件
  const onBlur = useCallback(
    (event: FocusEvent<HTMLInputElement>) => {
      propsOnBlur?.(event);
    },
    [propsOnBlur]
  );

  return (
    <InputContainer className={classNames(className)} size={size}>
      {/* 加载状态图标 */}
      {loading ? <LoadingIcon className={classNames("input-loading-icon")} /> : <SearchIcon className={classNames("input-search-icon")} />}
      {/* 输入框 */}
      <input enterKeyHint="search" value={value} onChange={handlerChange} onKeyUp={onKeyUp} onBlur={onBlur} {...elprops} />
      {/* 清除按钮 */}
      {value && (
        <SimpleButton className={classNames("input-clear-icon")} title="clear" onClick={() => setValue("")}>
          <ClearIcon />
        </SimpleButton>
      )}
    </InputContainer>
  );
};

export default Input;
------------------------------------------------------------------------------
// @/components/Input/styled.tsx
import styled from "styled-components";
import variables from "@/styles/variables.module.scss";
type InputProps = {
  size: "default" | "small" | "large" | undefined;
};
export const InputContainer = styled.div<InputProps>`
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: ${({ size }) => {
    if (size === "default") return "var(--cd-input-height)";
    else if (size === "small") return "var(--cd-input-sm-height)";
    else return "var(--cd-input-large-height)";
  }};
  padding-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 0 solid white;
  border-radius: 4px;
  input {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 14px;
    padding: 0 8px;
    background: #fff;
    color: #333;
    border: 0 solid #fff;
    border-radius: 5px;
    &:focus {
      color: #333;
      outline: none;
    }
    &::placeholder {
      color: #888;
    }
    @media (max-width: ${variables.mobileBreakPoint}) {
      font-size: 12px;
      width: 100%;
      padding-left: 6px;
      padding-right: 16px;
    }
  }
  .input-loading-icon,
  .input-search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 8px;
  }
  .input-loading-icon {
    animation: rotate 2s linear infinite;
  }
  .input-clear-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
`;

3. 使用方式

// 引入组件
import Input from '@/components/Input'
// 使用
const [loading, setLoading] = useState(false);
const [searchkeyword, setSearchkeyword] = useState("");
{/* 输入框值变化回调事件 */}
const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {
  console.log("onInputChange", event.target.value);
  setSearchkeyword(event.target.value);
};
{/* 失焦回调事件 */}
const onInputBlur = () => {};
{/* 小尺寸,不带loading */}
<Input placeholder="请输入" size="small" />
{/* 标准尺寸,带loading */}
<Input placeholder="请输入" loading={loading} onChange={onInputChange} onBlur={onInputBlur} />
{/* 大尺寸,不带loading */}
<Input placeholder="请输入" size="large" />

4. 效果展示

(1)输入后,加载效果如下
注:如请求数据时添加加载状态,请求结束后取消加载状态

在这里插入图片描述

(2)点击清除按钮,清除数据效果

在这里插入图片描述

(3)三种尺寸显示如下

在这里插入图片描述


总结

下一篇讲【全局常用Search组件封装】。关注本栏目,将实时更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/744876.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vite+vue3+ts项目搭建流程 (pnpm, eslint, prettier, stylint, husky,commitlint )

vitevue3ts项目搭建 项目搭建项目目录结构 项目配置自动打开项目eslint①vue3环境代码校验插件②修改.eslintrc.cjs配置文件③.eslintignore忽略文件④运行脚本 prettier①安装依赖包②.prettierrc添加规则③.prettierignore忽略文件④运行脚本 stylint①.stylelintrc.cjs配置文…

【云原生】Kubernetes网络知识

Kubernetes网络管理 文章目录 Kubernetes网络管理一、案例概述二、案例前置知识点2.1、Kubernetes网络模型2.2、Docker网络基础2.3、Kubernetes网络通信2.3.1、Pod内容器与内容之间的通信2.3.2、Pod与Pod之间的通信 2.4、Flannel网络插件2.5、Calico网络插件2.5.1、Calico网络模…

免费下载电子书的网站

在如今的数字化时代&#xff0c;电子书已成为许多人书籍阅读的首选。下面小编就和大家分享一些提供免费查找下载电子书服务的网站&#xff0c;这些网站不仅资源丰富&#xff0c;而且操作简便。 免费下载电子书的网站&#xff1a;https://www.bgrdh.com/favorites/1355.html 1…

数据可视化期末考试(编程)

1.KNN 1.新增数据的分类 import pandas as pd # 您的原始数据字典 data { 电影名称: [电影1, 电影2, 电影3, 电影4, 电影5], 打斗镜头: [10, 5, 108, 115, 20], 接吻镜头: [110, 89, 5, 8, 200], 电影类型: [爱情片, 爱情片, 动作片, 动作片, 爱情片] } …

昇思25天学习打卡营第8天 | 模型的保存与加载

内容介绍&#xff1a;在训练网络模型的过程中&#xff0c;实际上我们希望保存中间和最后的结果&#xff0c;用于微调&#xff08;fine-tune&#xff09;和后续的模型推理与部署&#xff0c;本章节我们将介绍如何保存与加载模型。 具体内容&#xff1a; 1. 导包 import numpy…

1.1 MySQL用户管理

1.1.1 用户的定义 用户名主机域 mysql> select user,host,password from mysql.user; --------------------------------------------------------------- | user | host | password | -----------------------------------------…

el-form重置后input无法输入问题

新增用户遇到的问题&#xff1a; 如果你没有为 formData 设置默认值&#xff0c;而只是将其初始化为空对象 {}&#xff0c;则在打开dialog时&#xff0c;正常输入&#xff0c; formdata会变成如下 但是&#xff0c;打开后&#xff0c;直接使用 resetFields 或直接清空表单&…

LLDB 详解

LLDB 详解 LLDB 详解编译器集成优势LLDB 的主要功能命令格式原始&#xff08;raw&#xff09;命令选项终止符: -- LLDB 中的变量唯一匹配原则helpexpressionprint、call、po控制流程&#xff1a;continue、next、step、finishregister read / writethread backtracethread retu…

基于weixin小程序新生报到系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;班级信息管理&#xff0c;师资力量管理&#xff0c;宿舍信息管理&#xff0c;宿舍安排管理&#xff0c;签到信息管理&#xff0c;论坛管理 小程序功能包括&#xff1a;系统首页&am…

考研数学一有多难?130+背后的残酷真相

考研数学一很难 大家平时在网上上看到很多人说自己考了130&#xff0c;其实这些人只占参加考研数学人数的极少部分&#xff0c;有个数据可以展示出来考研数学到底有多难&#xff1a; 在几百万考研大军中&#xff0c;能考到120分以上的考生只有2%。绝大多数人的分数集中在30到…

【MySQL进阶之路 | 高级篇】MySQL8.0索引新特性->降序索引与隐藏索引

1. 支持降序索引 降序索引以降序存储键值.虽然在语法上&#xff0c;从MySQL4版本已经支持降序索引的语法了&#xff0c;但实际上该DESC定义是被忽略的.知道MySQL8.x版本才开始真正支持降序索引.(仅限于InnoDB存储引擎). MySQL在8.0版本前创建的仍然是升序索引&#xff0c;使用…

【C++11(二)】lambda表达式和可变参数模板

一、可变参数模板 C11的新特性可变参数模板 能够让您创建可以接受 可变参数的函数模板和类模板 // Args是一个模板参数包&#xff0c;args是一个函数形参参数包 // 声明一个参数包Args...args&#xff0c;这个参数包中可以包含0到任意个模板参数。 template <class ...Arg…

vue3 使用JsMind的方法,以及引入提示报错,无法找到模块“jsmind”的声明文件

最终结果&#xff1a; 一、使用&#xff1a;使用yarn或者npm 安装 yarn add jsmind npm install vue-jsmind 二、引入 两种方法&#xff1a;&#xff08;如果这样引入没问题按照这样引入&#xff09; import "jsmind/style/jsmind.css"; import JsMind from &quo…

【SSM】医疗健康平台-用户端-体检预约

知识目标 了解FreeMarker&#xff0c;能够简述FreeMarker的作用和生成文件的原理 熟悉FreeMarker的常用指令&#xff0c;能够在FTL标签中正确使用assign指令、include指令、if指令和list指令 掌握显示套餐列表功能的实现 掌握显示套餐详情功能的实现 掌握体检预约功能的实现…

nodejs——ejs模版遇到原型链污染产生rce

[GYCTF2020]Ez_Express 打开是一个登陆框 在源代码中找到 在代码里找到敏感关键字 找到merge 想到原型链污染 这里登陆只能用ADMIN才能登陆成功 但是这里index.php又设置了一个waf ban了admin的大小写 这里需要绕过这个waf 看注册这段代码 用的是这个toUpperCase()函数 之前…

【深度强化学习】如何使用多进程(multiprocessing、pipe)来加速训练

文章目录 实验结果实现思路思路1思路2 进程与线程介绍如何实现multiprocessing、Pipe的范例关于时间对比上的问题代码修改收敛为何不稳定 技巧进程资源抢占问题线程问题cpu和gpu问题 进阶&#xff08;还没看懂/还没实验&#xff09;附代码raw代码mul代码 实验结果 实验平台&am…

natsort 自然排序

1、安装 pip install natsort 2、为什么使用natsort 而不是sorted 在python中只需要调用sorted函数就可以了&#xff0c;但是这个函数有一个缺点&#xff0c;就是它是按照从第一位开始的顺序排列的。意思是&#xff1a; wav_file [1.wav, 13.wav, 9.wav, 2.wav,"23.wav…

Golang | Leetcode Golang题解之第198题打家劫舍

题目&#xff1a; 题解&#xff1a; func rob(nums []int) int {if len(nums) 0 {return 0}if len(nums) 1 {return nums[0]}first : nums[0]second : max(nums[0], nums[1])for i : 2; i < len(nums); i {first, second second, max(first nums[i], second)}return se…

图形编辑器基于Paper.js教程04: Paper.js中的基础知识

背景 了解paper.js的基础知识&#xff0c;在往后的开发过程中会让你如履平地。 基础知识 paper.js 提供了两种编写方式&#xff0c;一种是纯粹的JavaScript编写&#xff0c;还有一种是使用官方提供的PaperScript。 区别就是在于&#xff0c;调用paper下的字对象是否需要加pa…

Linux核心基础详解(第13天)

系列文章目录 一、Linux基础详解&#xff0c; 二、网编三要素和SSH原理 三、shell编程&#xff08;补充&#xff09; 文章目录 系列文章目录前言一、linux简介二、虚拟机简介1、设置VMware网卡1.1 修改VMware中网络1.2 修改本地net8网卡ip 2、安装命令版裸机3、安装centos操作…