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

Question

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

在视图的顶层，我创建了一个这样的输入字段：

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

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

我的模型有几层深，完全由可序列化的类型（原语、字符串、集合、记录和联合）组成。

我尝试在玩具应用程序中重现它（模型没有那么复杂），但它在那里按预期工作 - 光标保持位置。

有什么方法可以确定为什么光标在这些情况下移动？

Answer 1

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

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

从下面的链接： 反应不受控制的组件

在 React 渲染生命周期中，表单元素上的 value 属性将覆盖 DOM 中的值。对于不受控制的组件，您通常希望 React 指定初始值，但不控制后续更新。要处理这种情况，您可以指定 defaultValue 属性而不是 value。