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

Question

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

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

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

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

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

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

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

Answer 1

使用 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.