考察如下代码,页面中有个输入框,通过 Recoil Atom 来存储输入的值。

App.tsx

function NameInput() {
const [name, setName] = useRecoilState(nameState);
return (
<>
<input
type="text"
value={name}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
setName(event.currentTarget.value);
}}
/>
<p>{name}</p>
</>
);
} function App() {
return (
<div className="App">
<NameInput />
</div>
);
}

实际运行效果是,输入一定信息后,将光标移动到其他位置再输入,发现光标会被重置到已经输入内容的最后。

Recoil 输入框中光标位置被重置到了内容末尾

相关 issue 参见 Setter in selector forces the input cursor to jump to end of input field on change event #488

实践中发现,该问题在 Recoil 搭配 React 16.8 才会有问题,而更新 React 后问题不复现,比如 16.9。

如果受限于平台或其他不可抗力无法升级 React,临时的解决办法可以是通过 useState 设置一个本地状态,在该状态变更后同步到 Reacoil 的状态上。

-  const [name, setName] = useRecoilState(nameState);
+ const setRecoilName = useSetRecoilState(nameState);
+ const [name, setName] = useState(""); + useEffect(() => {
+ setRecoilName(name);
+ }, [name, setRecoilName]);

The text was updated successfully, but these errors were encountered:

Recoil Input 光标位置被重置到末尾的问题的更多相关文章

  1. input光标位置

    兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...

  2. ie 下input光标位置垂直不居中问题

    input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...

  3. input光标位置不居中问题

    文本输入框默认在谷歌,火狐浏览器中,光标是居中显示的.但在IE7中一开始会在顶部闪烁(输入文字后光标居中),加上行高就可以,值为文本框的高度. 注意要加*号,否则在谷歌浏览其中光标会在顶部闪烁. *l ...

  4. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  5. input输入时光标位置靠上问题解决

    在css中如果我们定义了input高度在输入时会发现光标位置靠上了不在居中了,在Chrome浏览器中,当设置了line-height时,input无文字,光标高度与line-height一致:inpu ...

  6. EditText光标位置

    1.xml中设置 gravity="top"  加入edittext框的高度不止一行时,该属性可是光标定位在第一行,不设置的话光标是默认在框的中间 2.etEdit.setSele ...

  7. Android 设置EditText光标位置

    Android中有很多可编辑的弹出框,其中有些是让我们来修改其中的字符,这时光标位置定位在哪里呢? 刚刚解了一个bug是关于这个光标的位置的,似乎Android原生中这种情况是把光标定位到字符串的最前 ...

  8. Demo 示例控制输入光标位置

    <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="aut ...

  9. TextArea中定位光标位置

    原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明 ...

随机推荐

  1. Flutter: 判断是Android还是Ios

    /// 在ui中使用下面的这个判断 Theme.of(context).platform == TargetPlatform.android /// 而不是 import 'dart:io' Plat ...

  2. NGK算力生态建设者狂欢!SPC之后又有VAST!

    想致富,先挖矿.这句话已经成为了币圈的一句名言.挖矿一词始终贯穿着区块链以及数字加密领域. 据小道消息透露,NGK官最近将会推出两款挖矿产品---SPC星空币以及其子币VAST维萨币. 下面笔者就来一 ...

  3. Datahero Inc利用区块链溯源,造福各行各业

    近些年来,随着区块链技术的不断崛起以及快速发展,越多越多的人提出将区块链技术引入到溯源系统当中,溯源也成为了区块链技术的重要应用场景之一. 目前,Datahero inc已建设一整套的溯源平台系统,基 ...

  4. ffmpeg中的日志控制、保存日志到指定文件、处理进度查询

    ffmpeg默认就会输出一些日志,包含编译的工具(gcc版本).可用的组件(--enable-xxxx).组件版本号码,如下图 这些信息是默认输出的,每次执行合作都会打印在控制台中,如果不想看这些信息 ...

  5. .Net Core 3.1浏览器后端服务(三) Swagger引入与应用

    一.前言 前后端分离的软件开发方式已逐步成为互联网项目开发的业界标准,前后端分离带来了诸多好处的同时,也带来了一些弊端. 接口文档的维护就是其中之一,起初前后端约定文档规范,开发的很愉快,随着时间推移 ...

  6. vue版本一直是2.9.6版本,卸载也卸载不掉,更新也更新不了

    原文链接:https://blog.csdn.net/zlzbt/article/details/110136755 主要是找到本地文件 E:\StudyFile\VueStudy λ where v ...

  7. 第39天学习打卡(多线程 Thread Runnable 初始并发问题 Callable )

    多线程详解 01线程简介 Process与Thread 程序:是指令和数据的有序集合,其本身没有任何运行的含义,是一个静态的概念. 进程则是执行程序的一次执行过程,它是一个动态的概念.是系统资源分配的 ...

  8. 后端程序员之路 24、Redis hiredis

    Redishttps://redis.io/ Redis快速入门 - Redis教程http://www.yiibai.com/redis/redis_quick_guide.html wget ht ...

  9. HTML5基础入门一天学完

    HTML 什么是HTML HTML:Hyper Text Markup Language(超文本编辑语言) HTML的发展史 HTML5优势 世界知名浏览器厂商对HTML5的支持 市场的需求 跨平台 ...

  10. Oracle数据库搬家牵扯出的一些知识点记录

    Oracle数据库迁移过程中的一些记录 工作原因,对开发服务器的数据库进行了迁移,实际执行操作之前查了一下迁移oracle数据库的可行方案,最后用了 exp/imp 进行导出导入(这个比较简单),以及 ...