React单个useRef绑定多个MUI TextField：为何直接传ref仅指向最后一个？

直接传ref只关联最后一个实例的原因 #

你用useRef创建的inputSchemaVersionRef是一个单一的引用对象。React处理这种ref赋值时，会在每个TextField挂载或更新时，直接把当前DOM元素的引用覆盖到inputSchemaVersionRef.current上。当多个TextField依次渲染完成后，只有最后一个TextField的DOM引用会保留在current里，前面的都被后续的赋值覆盖了，这就是你只能拿到最后一个实例的原因。

函数式ref手动赋值生效的原因 #

用inputRef={(ref) => (inputSchemaVersionRef.current = ref)}这种函数式ref时，React会在每个TextField挂载时调用这个回调，传入对应的DOM引用；卸载时则传入null。如果你的多个TextField是在不同的渲染分支（比如条件切换、动态显示的场景）下存在的，那么只有当前正在渲染的那个TextField会触发回调，把自己的引用赋值给inputSchemaVersionRef.current。这样每次显示的TextField对应的引用都会被正确更新，不会被其他未渲染的实例覆盖，所以这种方式能符合你的预期。

补充：如果需要同时保存多个TextField的引用，你应该创建一个ref数组，比如：

const inputRefs = useRef<HTMLInputElement[]>([]);

// 循环渲染时给每个TextField分配对应的ref项
{yourFields.map((field, idx) => (
  <TextField 
    key={idx} 
    inputRef={(ref) => inputRefs.current[idx] = ref} 
  />
))}

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