React：如何将子组件输入校验状态传递给父组件表单

要实现“任一子组件存在校验提示时禁用父组件提交按钮”的需求，核心是让父组件收集所有子组件的校验状态，再统一判断是否允许提交。具体步骤如下：

1. 给子组件添加状态回调Props #

首先修改子组件的Props定义，新增回调函数用于向父组件传递当前校验状态，同时给每个子组件分配唯一标识（方便父组件区分不同字段）：

// 定义子组件Props类型
type TextSearchProps = {
  // 保留你原有其他Props
  fieldKey: string; // 唯一标识当前字段，比如"age"、"phone"
  onValidationChange: (isValid: boolean) => void; // 校验状态变化时通知父组件
};

const TextSearch: FC<TextSearchProps> = memo(({ fieldKey, onValidationChange }) => {
  const [validationMessage, setValidationMessage] = useState('');

  const onTextChange = (e: React.FormEvent<HTMLInputElement>) => {
    const input = e.currentTarget.value;
    if (input && !checkNumericOnly(input)) {
      setValidationMessage('Only numbers allowed');
    } else {
      setValidationMessage('');
    }
  };

  // 监听校验消息变化，实时通知父组件当前是否有效
  useEffect(() => {
    const isValid = !validationMessage; // 无校验提示即为有效
    onValidationChange(isValid);
  }, [validationMessage, onValidationChange]);

  return (
    <div className={classes.textSearch}>
      <InputText
        className={validationMessage ? 'p-invalid' : ''}
        onChange={onTextChange}
      />
      <div className={classes.invalid}>{validationMessage}</div>
    </div>
  );
});

2. 父组件收集并汇总所有子组件的校验状态 #

父组件通过一个对象存储每个子组件的校验结果，再通过every方法判断是否所有字段都有效：

const AdvancedSearch: FC<SearchProps> = memo(_props => {
  const dispatch: AppDispatch = useDispatch();
  const data = useSelector(selectSearchData());

  // 存储每个字段的校验状态：{ 字段标识: 是否有效 }
  const [fieldValidity, setFieldValidity] = useState<Record<string, boolean>>({});

  // 计算整体有效性：所有字段都有效时才返回true
  const validInput = Object.values(fieldValidity).every(isValid => isValid);

  // 处理子组件传来的校验状态更新
  const handleValidationChange = (fieldKey: string, isValid: boolean) => {
    setFieldValidity(prev => ({
      ...prev,
      [fieldKey]: isValid
    }));
  };

  return (
    <div>
      {/* 渲染多个子组件，每个传入唯一fieldKey和回调 */}
      <TextSearch 
        fieldKey="age" 
        onValidationChange={(isValid) => handleValidationChange("age", isValid)} 
      />
      <TextSearch 
        fieldKey="phone" 
        onValidationChange={(isValid) => handleValidationChange("phone", isValid)} 
      />

      {/* 提交按钮根据validInput状态禁用 */}
      <button disabled={!validInput} onClick={() => {
        // 你的提交逻辑
        dispatch(xxx);
      }}>
        提交筛选
      </button>
    </div>
  );
});

补充说明 #

• 如果子组件是动态生成的（比如从配置数组渲染），只需遍历数组时给每个子组件分配唯一的fieldKey即可，逻辑完全通用。
• 这种方式是React单向数据流的标准实现：子组件状态变化时主动通知父组件，父组件汇总状态后控制按钮禁用状态，符合React设计理念。

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