React-final-form - 将 state 转换为表单值

Question

I want to 'plug in' a map location picker into some of my forms to add longitude and latitude into the form values.

I created this sandbox to demonstrate the difficulties I'm having.

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)}
 ...
/>

I need the location picker component Geo.jsx to be a separate reusable component to 'plug in' to any react-final-form Form if needed. I also need the latitude and longitude inputs visible and editable for cases when the user wants to manually input these values.

If anyone can see where I'm going wrong with this, it would be very much appreciated.

Answer 1

I fixed this by simply changing value to defaultValue .

On further reading I realised that value is only for checkboxes and radio buttons.

Change

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

to

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