reactjs - Fable.React-编辑输入字段可将光标移动到文本结尾(Fable.React - editing an Input field moves cursor to end of text)

Question

I'm working with the Elmish.Bridge flavor of the SAFE stack.

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

At the top level of the view, I create an input field like this:

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

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

When I edit that field's value by typing in the middle of it, the model is updated as expected, but the cursor also moves to the end of the input's text .

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

My model is several layers deep and is completely made of serializable types (primitives, strings, collections, records, and unions).

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

I tried reproducing this in a toy app (where the model is much less complicated), but it works as expected there - the cursor maintains position.

(我尝试在玩具应用程序（模型不那么复杂）中重现此内容，但它在那里正常工作-光标保持位置。)

Is there any way to determine why the cursor is moving under these circumstances?

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

  ask by Overlord Zurg translate from so

Answer 1

Using the DefaultValue instead of Value should fix this.

(使用DefaultValue代替Value应该可以解决此问题。)

This works with Fable.React and Fable.Elmish.

(这适用于Fable.React和Fable.Elmish。)

Using DefaultValue will not initiate an update of the component / DOM in the react lifecyle and you should therefore not get the cursor changes.

(使用DefaultValue不会在react生命周期中启动组件/ DOM的更新，因此您不应获取光标更改。)

From the link below: react uncontrolled components

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

In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM.

(在React渲染生命周期中，表单元素上的value属性将覆盖DOM中的值。)

With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled.

(对于不受控制的组件，您通常希望React指定初始值，但使后续更新不受控制。)

To handle this case, you can specify a defaultValue attribute instead of value.

(为了处理这种情况下，你可以指定一个默认值属性，而不是价值。)