React,Antd实现文本输入框话题添加及删除的完整功能解决方案

最终效果就是实现该输入框:

  • 添加话题时,话题自动插入到输入框前面
  • 多文本输入框左侧间距为话题的宽度
  • 多行文本时,第二行紧接开头渲染
  • 删除文本时,如果删除到话题,再次删除,话题被删除
  1. 首先构造div结构
  const [hashtag, setHashtag] = useState(""); // 话题内容
  const [textIndent, setTextIndent] = useState("0px"); // 动态缩进
  const hashtagRef = useRef(null);
  const [value, setValue] = useState("");
  const [focus, setFocus] = useState(false);


<div className="topInput">
            <div className="topiceShow" ref={hashtagRef}>
              {hashtag}
            </div>
            <TextArea
              value={value}
              onChange={(e) => setValue(e.target.value)}
              onInput={TextAreaInput

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

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

相关文章

Apache服务器配置:从小白到高手的飞跃

本节目录&#xff1a; Web服务器概述 Apache服务器及安装 配置 作业 Web服务:互联网的心脏 想象一下&#xff0c;如果没有Web服务器&#xff0c;我们就不能浏览网页&#xff0c;不能在线购物&#xff0c;不能看视频&#xff0c;不能做很多事情。Web服务器就是互联网的心脏&…

基于SpringBoot的滑雪场管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

bean创建源码

去字节面试&#xff0c;直接让人出门左拐&#xff1a;Bean 生命周期都不知道&#xff01; spring启动创建bean流程 下面就接上了 bean生命周期 doGetBean Object sharedInstance this.getSingleton(beanName); sharedInstance this.getSingleton(beanName, new ObjectF…

【HarmonyOS】鸿蒙获取appIdentifier,Identifier

【HarmonyOS】鸿蒙获取appIdentifier&#xff0c;Identifier 一、前言 三方后台需要填写的所谓appIdentifier&#xff0c;Identifier信息&#xff0c;其实对应鸿蒙应用的appID。 二、解决方案&#xff1a; 注意&#xff0c;模拟器获取data.signatureInfo.appIndentifer为空…

在Linux的嵌入式开发中,如何确定要操作的帧缓冲设备是第几个实例?即是fb0还是fb1还是fb2...

方法汇总 在实际编写程序时&#xff0c;要确定操作的帧缓冲设备&#xff08;如 /dev/fb0、/dev/fb1 等&#xff09;&#xff0c;通常需要结合系统环境和硬件配置。以下是一些常见的方法&#xff0c;帮助你确定需要打开的帧缓冲设备实例&#xff1a; 1. 检查系统设备文件 查看…

The Past, Present and Future of Apache Flink

摘要&#xff1a;本文整理自阿里云开源大数据负责人王峰&#xff08;莫问&#xff09;在 Flink Forward Asia 2024上海站主论坛开场的分享&#xff0c;今年正值Flink开源项目诞生的第10周年&#xff0c;借此时机&#xff0c;王峰回顾了Flink在过去10年的发展历程以及 Flink社区…

自动驾驶控制与规划——Project 2: 车辆横向控制

目录 零、任务介绍一、环境配置二、算法三、代码实现四、效果展示 零、任务介绍 补全src/ros-bridge/carla_shenlan_projects/carla_shenlan_stanley_pid_controller/src/stanley_controller.cpp中的TODO部分。 一、环境配置 上一次作业中没有配置docker使用gpu&#xff0c;…

FFmpeg库之ffplay

文章目录 FFmpeg环境搭建ffplay使用通用选项视频选项音频选项快捷键使用滤镜直播拉流 FFmpeg环境搭建 FFmpeg官网 FFmpeg环境搭建 我这里用的是cmake配置&#xff0c;mingw编译&#xff0c;不用移动文件夹 CMakeLists.txt cmake_minimum_required ( VERSION 3.16 )project…

jenkins pipeline打包流程

Jenkins Pipeline 是 Jenkins 提供的一种用于持续集成和持续交付&#xff08;CI/CD&#xff09;的脚本化流程工具。它允许你通过编写一个 Jenkinsfile 文件来定义整个构建、测试和部署的流程。本文介绍打包springcloud项目&#xff0c;react项目为docker镜像 文章目录 1.项目结…

【LC】876. 链表的中间结点

题目描述&#xff1a; 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间结点…

WEB开发: Node.js路由之由浅入深- 即拿即用完整版

前面我们一起学习了Node.js路由之由浅入深&#xff0c;基本了解并熟悉了Node.js的路由实现。 现在我们来一个综合完整版&#xff0c;让这个路由模块即拿即用&#xff0c;也就是下载运行就可用&#xff0c;并可以轻松地自行增加路由&#xff0c;无需去繁琐地修改路由配置&#…

就业相关(硕士)

一、嵌入式 1.机器人行业 1.1 大致情况 要做机器人行业&#xff0c;主要技术栈是运动控制、深度学习、强化学习、具身智能等&#xff0c;主要求职方向有运动控制算法工程师和机器人算法工程师等等。大致薪资在30w到50w不等&#xff0c;主要看方向&#xff08;双211&#xff…

C++编程:使用树莓派Pico制作光控小夜灯

在智能家居系统中,光控设备通过环境光强度的变化自动调节设备的状态,具有广泛的应用。常见的应用场景包括自动开关灯、调节LED亮度等。本项目基于树莓派Pico开发板,通过光敏电阻检测环境光强度,并利用PWM调光控制LED亮度,实现一个简单的光控小夜灯。本文将深入解析光敏电阻…

安卓获取所有可用摄像头并指定预览

在Android设备中&#xff0c;做预览拍照的需求的时候&#xff0c;我们会指定 CameraSelector DEFAULT_FRONT_CAMERA前置 或者后置CameraSelector DEFAULT_BACK_CAMERA 如果你使用的是平板或者工业平板&#xff0c;那么就会遇到多摄像头以及外置摄像头问题&#xff0c;简单的指…

回归任务与分类任务应用及评价指标

能源系统中的回归任务与分类任务应用及评价指标 一、回归任务应用1.1 能源系统中的回归任务应用1.1.1 能源消耗预测1.1.2 负荷预测1.1.3 电池健康状态估计&#xff08;SOH预测&#xff09;1.1.4 太阳能发电量预测1.1.5 风能发电量预测 1.2 回归任务中的评价指标1.2.1 RMSE&…

shilei定标算法,测试的时候为什么有多解

设定P&#xff0c;找C12和C13时&#xff0c;如果找的是实数&#xff0c;则求解的P只需要保证是实数就能满足螺旋度 0方程

【echarts】数据过多时可以左右滑动查看(可鼠标可滚动条)

1. 鼠标左右拖动 在和 series 同级的地方配置 dataZoom&#xff1a; dataZoom: [{type: inside, // inside 鼠标左右拖图表&#xff0c;滚轮缩放&#xff1b; slider 使用滑动条start: 0, // 左边的滑块位置&#xff0c;表示从 0 开始显示end: 60, // 右边的滑块位置&#xf…

redis集群 服务器更换ip,怎么办,怎么更换redis集群的ip

redis集群 服务器更换ip&#xff0c;怎么办&#xff0c;怎么更换redis集群的ip 1、安装redis三主三从集群2、正常状态的redis集群3、更改redis集群服务器的ip 重启服务器 集群会down4、更改redis集群服务器的ip 重启服务器 集群down的原因5、更改redis集群服务器的ip后&#xf…

计算机网络知识点全梳理(一.TCP/IP网络模型)

目录 TCP/IP网络模型概述 应用层 什么是应用层 应用层功能 应用层协议 传输层 什么是传输层 传输层功能 传输层协议 网络层 什么是网络层 网络层功能 网络层协议 数据链路层 什么是数据链路层 数据链路层功能 物理层 物理层的概念和功能 写在前面 本系列文…

【Python爬虫实战】深入解析 Scrapy 管道:数据清洗、验证与存储的实战指南

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、了解 Scrapy Shell 二、配置文件 settings.py &#xff08;一&#xff09;为什么需要配置文件 &…