rc-field-form的Field组件封装后onChange无法触发问题排查

问题原因 #

你封装的FormField在处理非函数类型的子组件时，通过React.cloneElement将control对象的属性直接展开覆盖在子组件上。而rc-field-form提供的control对象本身包含onChange、onClick等表单控制相关的事件处理函数，这会直接替换掉你在子组件（如Input）上绑定的同名自定义事件，导致子组件自身的事件无法触发。

修复方案 #

方案1：自动合并事件处理函数 #

在克隆子组件时，将子组件原有的事件与control中的表单事件进行合并，确保两者都会执行：

import * as React from "react";
import Form from "rc-field-form";
import type { FieldProps } from "rc-field-form/lib/Field";

const { Field } = Form;

interface LabelFieldProps extends FieldProps {
  label?: React.ReactNode;
  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
  onChange?: (event?: React.ChangeEvent<HTMLElement>) => void;
}

export const FormField: React.FunctionComponent<LabelFieldProps> = ({
  name,
  label,
  children,
  ...restProps
}) => (
  <Field name={name} {...restProps}>
    {(control, meta, form) => {
      const childNode =
        typeof children === "function"
          ? children(control, meta, form)
          : React.cloneElement(children as React.ReactElement, {
              // 合并onChange事件：先执行子组件自定义事件，再执行表单控制事件
              onChange: (e: React.ChangeEvent<HTMLElement>) => {
                (children as React.ReactElement).props.onChange?.(e);
                control.onChange(e);
              },
              // 合并onClick事件
              onClick: (e: React.MouseEvent<HTMLElement>) => {
                (children as React.ReactElement).props.onClick?.(e);
                control.onClick?.(e);
              },
              // 传递control的其他属性
              ...control,
            });

      return (
        <div className="flex flex-col mb-5">
          <div className="flex flex-col">
            {label && <span className="text-md font-semibold mb-2">{label}</span>}
            {childNode}
          </div>
        </div>
      );
    }}
  </Field>
);

方案2：优先使用函数式子组件（更灵活） #

采用rc-field-form官方推荐的函数式子组件方式，让开发者自主控制表单事件与自定义事件的结合逻辑，同时保留对非函数子组件的兼容：

import * as React from "react";
import Form from "rc-field-form";
import type { FieldProps } from "rc-field-form/lib/Field";

const { Field } = Form;

interface LabelFieldProps extends FieldProps {
  label?: React.ReactNode;
  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
  onChange?: (event?: React.ChangeEvent<HTMLElement>) => void;
}

export const FormField: React.FunctionComponent<LabelFieldProps> = ({
  name,
  label,
  children,
  ...restProps
}) => (
  <Field name={name} {...restProps}>
    {(control, meta, form) => {
      let childNode;
      if (typeof children === "function") {
        // 函数式子组件：由开发者自行处理事件逻辑
        childNode = children(control, meta, form);
      } else {
        // 兼容非函数子组件，同时给出优化提示
        console.warn("推荐使用函数式子组件，以便更灵活地控制表单事件与自定义事件的执行逻辑");
        childNode = React.cloneElement(children as React.ReactElement, {
          onChange: (e: React.ChangeEvent<HTMLElement>) => {
            (children as React.ReactElement).props.onChange?.(e);
            control.onChange(e);
          },
          onClick: (e: React.MouseEvent<HTMLElement>) => {
            (children as React.ReactElement).props.onClick?.(e);
            control.onClick?.(e);
          },
          ...control,
        });
      }

      return (
        <div className="flex flex-col mb-5">
          <div className="flex flex-col">
            {label && <span className="text-md font-semibold mb-2">{label}</span>}
            {childNode}
          </div>
        </div>
      );
    }}
  </Field>
);

函数式子组件使用示例

<FormField name="test" label="Some Test">
  {(control) => (
    <Input 
      {...control} 
      onChange={(e) => {
        console.log(e.target.value); // 自定义逻辑
        control.onChange(e); // 触发表单的状态更新
      }} 
    />
  )}
</FormField>

方案对比 #

• 方案1：无需修改原有使用方式，自动合并事件，适合快速修复现有代码。
• 方案2：更符合rc-field-form的设计理念，赋予开发者完全的事件控制权，推荐用于新开发的场景。

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