如何从Formik表单外部的事件函数更新lat和lng字段？

要实现点击地图更新Formik表单的lat和lng字段，同时不影响其他已输入内容，最直接的方式是通过innerRef获取Formik实例，在外部事件处理器中调用setFieldValue方法。

修改后的代码示例 #

import React, { useEffect, useRef } from 'react';
import { Formik, Form, Field } from 'formik';

const FormComponent = () => {
    // 创建ref存储Formik实例
    const formikRef = useRef(null);

    const onMapClick = e => {
        // 确保Formik实例已初始化
        if (formikRef.current) {
            // 只更新指定字段，不影响其他内容
            formikRef.current.setFieldValue('lat', e.detail.lat);
            formikRef.current.setFieldValue('lng', e.detail.lng);
        }
    };

    useEffect(() => {
        document.addEventListener('map:click', onMapClick);
        return () => {
            document.removeEventListener('map:click', onMapClick);
        };
    }, []);

    return (
        <Formik
            // 将Formik实例挂载到ref上
            innerRef={formikRef}
            initialValues={{ username: 'guest', lat: 50.447243, lng: 30.524933 }}
            onSubmit={values => { console.log(values); }}
        >
            {() => (
                <Form id="test">
                    <Field type="text" name="username" />
                    <Field type="text" name="lat" />
                    <Field type="text" name="lng" />
                    <button type="submit">Submit</button>
                </Form>
            )}
        </Formik>
    );
};

export default FormComponent;

原理说明 #

1. innerRef获取Formik实例：Formik提供innerRef属性，可将自身实例挂载到外部ref上，这样就能在组件的任意位置访问Formik的方法（包括setFieldValue）。
2. 精准更新字段：setFieldValue只会更新指定的lat和lng字段，不会触发整个表单的重置，完全适配多字段场景。

备选方案：在Formik内部监听事件 #

如果更倾向于将事件逻辑与Formik绑定，也可以在Formik的render prop函数内使用useEffect，直接利用提供的setFieldValue：

import React, { useEffect } from 'react';
import { Formik, Form, Field } from 'formik';

const FormComponent = () => {
    return (
        <Formik
            initialValues={{ username: 'guest', lat: 50.447243, lng: 30.524933 }}
            onSubmit={values => { console.log(values); }}
        >
            {({ setFieldValue }) => {
                useEffect(() => {
                    const handleMapClick = e => {
                        setFieldValue('lat', e.detail.lat);
                        setFieldValue('lng', e.detail.lng);
                    };
                    document.addEventListener('map:click', handleMapClick);
                    return () => document.removeEventListener('map:click', handleMapClick);
                }, [setFieldValue]);

                return (
                    <Form id="test">
                        <Field type="text" name="username" />
                        <Field type="text" name="lat" />
                        <Field type="text" name="lng" />
                        <button type="submit">Submit</button>
                    </Form>
                );
            }}
        </Formik>
    );
};

export default FormComponent;

这个方案将事件监听逻辑封装在Formik内部，避免了外部ref的使用，同样能实现需求且不会影响其他字段。

内容的提问来源于stack exchange，提问作者amay