React-final-form - 將 state 轉換為表單值

Question

我想將 map 位置選擇器“插入”到我的一些 forms 中，以將longitude和latitude添加到表單值中。

我創建了這個沙箱來展示我遇到的困難。

I can get the map position into state as the user pans the map, and render the values OK, but I can't get these values into the fields using

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

我需要位置選擇器組件Geo.jsx作為單獨的可重用組件，以便在需要時“插入”到任何 react-final-form Form 。 當用戶想要手動輸入這些值時，我還需要可見和可編輯的latitude和longitude輸入。

如果有人能看到我在哪里出錯，將不勝感激。

Answer 1

我通過簡單地將value更改為defaultValue來解決這個問題。

在進一步閱讀時，我意識到該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"
      />