如何在Formik自定义Text组件中实现绑定field状态的onChange方法

核心逻辑很简单：useField返回的field对象自带的onChange方法负责同步Formik内部的表单值、校验、touched状态，我们只要写一个组合式的事件处理函数，先执行内置的状态同步逻辑，再触发外部传入的自定义回调即可，完全不会破坏Formik的原生能力。

修改后的自定义Text组件代码 #

import { useField, FieldHookConfig } from 'formik';
// 替换成你项目里实际的Input组件引入路径
import Input from 'path-to-your-input-component';

type Props = FieldHookConfig<string> & {
  placeholder?: string;
  onChange?: (e: React.ChangeEvent<any>) => void
};

const Text = ({ ...props }: Props) => {
  const [field] = useField(props);

  const handleChange = (e: React.ChangeEvent<any>) => {
    // 先执行Formik内置的状态更新逻辑，保证表单值正常同步
    field.onChange(e);
    // 外部传入了自定义onChange时，再执行外部回调
    props.onChange?.(e);
  };

  return (
    <Input
      {...field}
      placeholder={props.placeholder}
      onChange={handleChange}
    />
  );
};

export default Text;

注意事项 #

• 两个逻辑的执行顺序不要调换：必须先跑field.onChange(e)，避免外部回调执行时Formik内部状态还没更新，拿到旧值
• 外部回调里可以直接通过e.target.value拿到当前输入的最新值，不需要额外读Formik状态
• 原有调用方式不需要任何修改，直接给组件传onChange prop就能正常触发
• 建议在Formik的initialValues里给对应字段设置初始值（比如示例里的firstName: ''），避免首次输入时出现未注册字段的警告

调用示例（和你原有写法完全兼容） #

<Formik initialValues={{ firstName: '' }} onSubmit={() => {}}>
  {() => (
    <Form>
      <Text
        name="firstName"
        type="text"
        placeholder="FirstName"
        onChange={(e) => {
          console.log('当前输入值：', e.target.value);
          // 这里写任意自定义逻辑，比如字段联动、输入格式过滤、埋点上报等
        }}
      />
    </Form>
  )}
</Formik>

内容的提问来源于stack exchange，提问作者A curious student