React-final-form - 将状态转换为表单值答案

【问题标题】：React-final-form - get state into form valuesReact-final-form - 将状态转换为表单值
【发布时间】：2020-11-28 07:32:00
【问题描述】：

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

我创建了这个sandbox 来展示我遇到的困难。

当用户平移地图时，我可以使地图position 进入状态，并将值呈现正常，但我无法使用这些值将这些值放入字段中

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

如果需要，我需要位置选择器组件 Geo.jsx 作为单独的可重用组件“插入”到任何 react-final-form Form。当用户想要手动输入这些值时，我还需要 latitude 和 longitude 输入可见且可编辑。

如果有人能看出我在哪里出错了，将不胜感激。

【问题讨论】：

标签： reactjs forms react-final-form final-form

【解决方案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"
      />

【讨论】：