【前端——bug】使用antd的Input组件无法通过ref修改value

问题背景

我要制作个人博客的chatgpt聊天页面,为了样式统一,我使用了antd的input组件,并且添加了ref属性获取当前输入的内容。我的预期效果是

  • 向输入框输入完成后,按下enter,把输入框置空
const message = ref.current.input.value.trim();
ref.current.input.value = '';<Input type="text" ref={ref} className={styles.userInput} placeholder="Type a message..."  onPressEnter={sendMessage} />

这里有一个坑就是,antd的input组件时封装html的,所以不能简单通过ref.current.value获取当前的内容,要再加一个input。

以上实践后发现,我enter后确实置空了,但是我对input框失焦或者再次点击后,值又回到上一次enter前的值

思考

- antd Input不要直接通过ref修改,因为当值发生改变时,必须在onChange中通过useState改变值,然后引发组件的重新渲染(可以使用ref来访问input元素,而改变ref的current属性的值时,不会导致重新渲染)

https://github.com/ant-design/ant-design/issues/18030
https://juejin.cn/post/7165804525431832612

解决办法

使用hooks来更新input的值

const [inputValue, setInputValue] = React.useState('');
const message = inputValue.trim();
setInputValue('');<Input type="text" placeholder="Type a message..."  onPressEnter={sendMessage} value={inputValue} onChange={(e) => setInputValue(e.target.value)} />

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Visual studio调试技巧

Visual studio调试技巧 bug是什么&#xff1f;Debug和ReleaseDebugRelease 如何调试VS调试快捷键调试过程中查看程序信息查看临时变量的值查看内存信息查看调用堆栈查看汇编信息查看寄存器信息 编译常见错误编译型错误链接型错误运行时错误 bug是什么&#xff1f; bug的英文释…

springcloud(智慧养老平台)

开发语言&#xff1a;Java JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09;服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.6/5.7&#xff08;或8.0&#xff09;数据库工具&#xff1a;Navicat 开发软件&#xff1a;idea 依赖管理包&#xff1a;Maven 代码数据库…

SAM:Segment Anything Model

论文&#xff08;ICCV&#xff0c;fackbook&#xff09;&#xff1a;Segment Anything 源码&#xff1a; https://github.com/facebookresearch/segment-anything demo&#xff1a;Segment Anything | Meta AI (segment-anything.com) 一、摘要 本文介绍了“Segment Anything…

活动回顾 | 春起潮涌——硬件驱动的量化交易与AI

4月20日&#xff0c;华锐技术ACLUB联合AMD在上海举办了“春起潮涌——硬件驱动的量化交易与AI”沙龙活动&#xff0c;会议围绕FPGA硬件加速、CPU&网卡调优、AI技术应用等展开&#xff0c;近50位量化IT与分享嘉宾一起探讨硬件技术在量化交易和AI领域的应用和创新。 FPGA在交…

构筑稳固基石:HTML网站架构与结构设计的深度探索

构筑稳固基石&#xff1a;HTML网站架构与结构设计的深度探索 在万维网的广阔天地里&#xff0c;每一个网站都是信息的港湾&#xff0c;而HTML作为这一切的基础&#xff0c;其架构与结构设计直接决定了站点的可访问性、可维护性和扩展性。本文将带你深入HTML的架构世界&#xf…

【C++第七课-string用法】

这里写自定义目录标题 string的初步介绍sring的构造函数string的构造函数-重点掌握无参的构造函数用常量字符串来初始化拷贝构造 string的构造函数-非重点掌握拷贝字符串str从pos位置开始的len个字符拷贝字符串s的前n个字符用n个c去初始化 string的赋值string的遍历和访问下标[…

爬虫自动化之drissionpage实现随时切换代理ip

目录 一、视频二、dp首次启动设置代理三、dp利用插件随时切换代理一、视频 视频直接点击学习SwitchyOmega插件使用其它二、dp首次启动设置代理 from DrissionPage import ChromiumPage, ChromiumOptions from loguru

matplotlib/seaborn 绘图可视化全面总结

1.概述 使用Matplotlib 绘图实现可视化时&#xff0c;会面临不同的需求有所调整&#xff0c;本文档重点对绘图过程中产生的一些小众需求进行全面总结&#xff0c;其他任务时可以随时即抽即用。 2.绘图 2.1 一般绘图 plt.figure() 参数设置说明 matplotlib.pyplot.figure( …

C++设计模式-创建型设计模式

设计模式 设计模式是什么 设计模式是指在软件开发中&#xff0c;经过验证的&#xff0c;用于解决在特定环境下&#xff0c;重复出现的&#xff0c;特定问题的解决方案&#xff1b;其实就是解决问题的固定套路。但是要慎用设计模式&#xff0c;有一定的工程代码量之后用它比较…

【论文阅读】Tutorial on Diffusion Models for Imaging and Vision

1.The Basics: Variational Auto-Encoder 1.1 VAE Setting 自动编码器有一个输入变量x和一个潜在变量z Example. 获得图像的潜在表现并不是一件陌生的事情。回到jpeg压缩&#xff0c;使用离散余弦变换&#xff08;dct&#xff09;基φn对图像的底层图像/块进行编码。如果你给…

git ,查看某个版本的某个文件内容

如题&#xff0c;右键 open git bash here, 打开git命令行&#xff1a; 首先&#xff1a; git log 可以查看历史提交的记录&#xff0c;拷贝某个版本的版本号&#xff0c; 类似如&#xff1a; commit 1ba842efcf8076a24d7fb5d6c6323e801ccbf3ff Author: &#xff58;&…

先电2.4的openstack搭建

先电2.4版本的openstack&#xff0c;前期虚拟机部署参考上一篇2.2版本&#xff0c;基本步骤是一样的&#xff0c;准备两个镜像文件CentOS-7.5-x86_64-DVD-1804.iso&#xff0c;XianDian-IaaS-V2.4.iso [rootcontroller ~]# cat /etc/sysconfig/network-scripts/ifcfg-eno16777…

L1-042 日期格式化

作者 陈越 单位 浙江大学 世界上不同国家有不同的写日期的习惯。比如美国人习惯写成“月-日-年”&#xff0c;而中国人习惯写成“年-月-日”。下面请你写个程序&#xff0c;自动把读入的美国格式的日期改写成中国习惯的日期。 输入格式&#xff1a; 输入在一行中按照“mm-d…

华为OD机试 - 小扇和小船的数字游戏 - 二进制(Java 2024 C卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

json文件的读取

📚博客主页:knighthood2001 ✨公众号:认知up吧 (目前正在带领大家一起提升认知,感兴趣可以来围观一下) 🎃知识星球:【认知up吧|成长|副业】介绍 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 🙏笔者水平有限,欢迎各位大佬指点,相…

论文笔记(四十五)Attention Is All You Need

Attention Is All You Need 文章概括摘要1. 介绍2. 背景3. 模型架构3.1 编码器和解码器堆栈3.2 Attention3.2.1 按比例点积Attention3.2.2 Multi-Head Attention3.2.3 注意力在模型中的应用 3.3 定位前馈网络3.4 嵌入与 Softmax3.5 位置编码 4 为什么 Self-Attention5. Trainin…

ssm104园区停车管理系统+jsp

园区停车管理系统的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管…

P9422 [蓝桥杯 2023 国 B] 合并数列

P9422 [蓝桥杯 2023 国 B] 合并数列 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 用队列即可 当两个队列队首&#xff1a;a b &#xff0c;弹出 当a < b&#xff0c;把a加给其后一个元素&#xff0c;弹出a 当b < a&#xff0c;把b加给其后一个元素&#xff0c;弹出…

[初阶数据结构】时间复杂度与空间复杂度

前言 &#x1f4da;作者简介&#xff1a;爱编程的小马&#xff0c;正在学习C/C&#xff0c;Linux及MySQL。 &#x1f4da;本文收录于初阶数据结构系列&#xff0c;本专栏主要是针对时间、空间复杂度&#xff0c;顺序表和链表、栈和队列、二叉树以及各类排序算法&#xff0c;持续…

无人机+无人车:自组网协同技术及应用前景详解

无人车&#xff0c;也被称为自动驾驶汽车、电脑驾驶汽车或轮式移动机器人&#xff0c;是一种通过电脑系统实现无人驾驶的智能汽车。这种汽车依靠人工智能、视觉计算、雷达、监控装置和全球定位系统协同合作&#xff0c;使得电脑可以在没有任何人类主动操作的情况下&#xff0c;…