React-final-form - get state into form value

Question

我想在我的一些表单中‘插入’一个地图位置选择器，以便将longitude和latitude添加到表单值中。

我创建这个sandbox是为了演示我所遇到的困难。

我可以让地图position在用户平移地图时进入状态，并将值呈现为OK，但我不能使用

<Field
 value={position.lat.toFixed(5)}
 ...
/>

我需要位置选择器组件Geo.jsx是一个单独的可重用组件，以便在需要时‘插入’到任何react-final-form Form中。当用户想要手动输入这些值时，我还需要可见和可编辑的latitude和longitude输入。

如果有人能看到我在这方面出了什么问题，我将非常感激。

Answer 1

我通过简单地将value更改为defaultValue修复了这个问题。

在further reading上，我意识到value只适用于复选框和单选按钮。

变化

      <Field
        name="longitude"
        label="Longitude"
        type="number"
        parse={(value) => Number(value)}
        component="input"
     -  value={position.lng.toFixed(5)}
        helper="At map center"
      />

至

      <Field
        name="longitude"
        label="Longitude"
        type="number"
        parse={(value) => Number(value)}
        component="input"
     +  defaultValue={position.lng.toFixed(5)}
        helper="At map center"
      />