Vue3组合式API：如何批量获取多个InputWithValidation组件的Ref？

核心思路：用回调Ref手动收集组件实例 #

React不会自动将多个组件Ref绑定到数组类型的Ref中，你需要通过回调Ref手动把每个组件实例收集到容器（数组或对象）里，之后就能统一调用校验方法。

方法1：数组容器（适合有序列表渲染的组件） #

1. 声明一个Ref容器存储组件实例：

import { useRef } from 'react';

const YourForm = () => {
  const inputRefs = useRef([]);
  
  // 统一校验函数
  const validateAllInputs = () => {
    // 遍历所有实例，调用isValid方法，过滤掉可能的null值
    return inputRefs.current.every(input => input?.isValid());
  };

  // 示例：假设你有一组表单配置数据
  const formInputs = [
    { id: 'username', label: '用户名' },
    { id: 'email', label: '邮箱' },
    { id: 'password', label: '密码' }
  ];

  return (
    <form>
      {formInputs.map((input, index) => (
        <InputWithValidation
          key={input.id}
          // 用回调Ref将实例存入数组对应索引
          ref={(el) => inputRefs.current[index] = el}
          label={input.label}
          // 其他组件props
        />
      ))}
      <button onClick={validateAllInputs}>提交</button>
    </form>
  );
};

方法2：对象容器（更可靠，避免索引混乱） #

如果表单组件的渲染顺序可能变化，用对象存储（以组件唯一标识为键）更稳妥：

const YourForm = () => {
  const inputRefs = useRef({});
  
  const validateAllInputs = () => {
    // 遍历对象值，调用校验方法
    return Object.values(inputRefs.current).every(input => input?.isValid());
  };

  return (
    <form>
      {formInputs.map(input => (
        <InputWithValidation
          key={input.id}
          // 用组件唯一id作为键存储实例
          ref={(el) => inputRefs.current[input.id] = el}
          label={input.label}
        />
      ))}
      <button onClick={validateAllInputs}>提交</button>
    </form>
  );
};

注意事项 #

• 用input?.isValid()避免组件卸载或未挂载时的null/undefined报错
• 确保组件的key属性唯一且稳定，避免React重新渲染时Ref错位
• 如果InputWithValidation是函数组件，需要用forwardRef包裹，否则无法获取到实例（类组件可直接获取）

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