React类组件中Formik表单的外部控制方案问询

直接修改DOM元素值会被Formik还原的核心原因是：Formik属于受控表单，表单输入值由其内部state驱动，每次组件渲染都会用内部state覆盖DOM值。要实现外部控制，必须同步更新Formik的内部状态，以下是3种实用方案：

方案1：通过Formik实例ref调用setFieldValue #

这是最直接的方式，通过ref获取Formik实例，调用官方提供的setFieldValue方法更新字段值，确保DOM与Formik状态同步。

代码示例： #

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

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    // 创建Formik实例的ref
    this.formikRef = React.createRef();
  }

  // 外部触发的设置方法
  setFormFieldValue = () => {
    // 通过ref调用Formik的setFieldValue更新指定字段
    this.formikRef.current.setFieldValue('username', '外部设置的用户名');
  };

  render() {
    return (
      <div>
        <button onClick={this.setFormFieldValue}>外部设置用户名</button>
        <Formik
          ref={this.formikRef}
          initialValues={{ username: '' }}
          onSubmit={(values) => console.log('提交:', values)}
        >
          {({ values }) => (
            <Form>
              <Field name="username" type="text" placeholder="用户名" />
              <p>当前值: {values.username}</p>
            </Form>
          )}
        </Formik>
      </div>
    );
  }
}

export default MyForm;

方案2：父组件state + enableReinitialize属性 #

如果外部控制的数据源来自父组件状态，可以将父组件state作为Formik的initialValues，并开启enableReinitialize={true}，让Formik在initialValues变化时自动重新初始化表单值。

代码示例： #

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

class ParentComponent extends React.Component {
  state = { externalUsername: '' };

  handleExternalUpdate = () => {
    this.setState({ externalUsername: '父组件传递的值' });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleExternalUpdate}>从父组件设置值</button>
        <Formik
          initialValues={{ username: this.state.externalUsername }}
          // 允许initialValues变化时重新初始化表单
          enableReinitialize={true}
          onSubmit={(values) => console.log('提交:', values)}
        >
          {({ values }) => (
            <Form>
              <Field name="username" type="text" placeholder="用户名" />
              <p>当前值: {values.username}</p>
            </Form>
          )}
        </Formik>
      </div>
    );
  }
}

export default ParentComponent;

方案3：自定义受控字段组件 #

如果需要更细粒度的字段控制，可以自定义Field组件，接收外部传入的value，在组件内部同步到Formik的状态中。

代码示例： #

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

// 自定义受控字段组件
class SyncField extends React.Component {
  componentDidUpdate(prevProps) {
    const { field, externalValue } = this.props;
    // 当外部值变化且与当前字段值不同时，同步到Formik
    if (externalValue !== prevProps.externalValue && externalValue !== field.value) {
      field.onChange({ target: { name: field.name, value: externalValue } });
    }
  }

  render() {
    const { field, externalValue, ...props } = this.props;
    // 优先使用外部传入的值，否则用Formik内部状态值
    const currentValue = externalValue !== undefined ? externalValue : field.value;
    return <input {...field} {...props} value={currentValue} />;
  }
}

class MyForm extends React.Component {
  state = { externalValue: '' };

  setExternalValue = () => {
    this.setState({ externalValue: '自定义组件同步的值' });
  };

  render() {
    return (
      <div>
        <button onClick={this.setExternalValue}>外部设置值</button>
        <Formik
          initialValues={{ username: '' }}
          onSubmit={(values) => console.log('提交:', values)}
        >
          {() => (
            <Form>
              <Field
                name="username"
                component={SyncField}
                externalValue={this.state.externalValue}
                placeholder="用户名"
              />
            </Form>
          )}
        </Formik>
      </div>
    );
  }
}

export default MyForm;

内容的提问来源于stack exchange，提问作者The Old County