reactjs - Fable.React - 编辑输入字段将光标移动到文本末尾

标签 reactjs f# fable-f# safe-stack

我正在使用 SAFE 堆栈的 Elmish.Bridge 风格。

在 View 的顶层,我创建一个如下输入字段:

Input.input [ Input.Value(model.FieldValue); Input.OnChange(fun e -> dispatch (EditFieldValue(e.Value))) ]

当我通过在中间输入来编辑该字段的值时,模型会按预期更新,但光标也会移动到输入文本的末尾 .

我的模型有几层深,并且完全由可序列化类型(基元、字符串、集合、记录和联合)组成。

我尝试在玩具应用程序中重现这一点(模型要简单得多),但它按预期工作 - 光标保持位置。

有什么方法可以确定光标在这种情况下移动的原因吗?

最佳答案

使用 DefaultValue 而不是 Value 应该可以解决此问题。

这适用于 Fable.React 和 Fable.Elmish。使用 DefaultValue 不会在 React 生命周期中启动组件/DOM 的更新,因此您不应该获得光标更改。

来自以下链接: react uncontrolled components

In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.

关于reactjs - Fable.React - 编辑输入字段将光标移动到文本末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59150614/

相关文章:

css - 防止前一个 div 调整大小时 div 向下移动

visual-studio-2010 - 什么取代了 XYGraph.dll?

f# - 高优先级应用程序表达式作为参数

F# Fable 和 JS 互操作 : unsafe list casting

f# - 使用 Fable-Elmish 上传文件

javascript - 在另一个按钮单击中添加一个 React 组件

javascript - 尝试运行 Webpack 时出现意外错误

reactjs - React 仅针对有省略号的文本显示 Material-UI 工具提示

f# - 如何创建其值只能在有效范围内的类型?

f# - Fable 中是否有任何优化 channel 可用?