如何使用Formik实现自定义Google Map组件的SetFieldValue

npm install formik

import React from 'react';
import { Formik, Form, Field } from 'formik';
import { GoogleMap, Marker } from 'react-google-maps';

const MapForm = () => {
  const handleMapClick = (e, setFieldValue) => {
    const { lat, lng } = e.latLng;
    setFieldValue('location', { lat, lng });
  };

  return (
    <Formik
      initialValues={{ location: { lat: 0, lng: 0 } }}
      onSubmit={values => {
        console.log(values);
      }}
    >
      {({ setFieldValue }) => (
        <Form>
          <Field name="location">
            {({ field }) => (
              <GoogleMap
                defaultZoom={8}
                defaultCenter={field.value}
                onClick={e => handleMapClick(e, setFieldValue)}
              >
                <Marker position={field.value} />
              </GoogleMap>
            )}
          </Field>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};