本文详解如何在函数组件首次渲染后正确获取 input 元素的初始值，重点解决 ref 无法透传至自定义子组件的问题，并提供基于 forwardRef 和 useEffect 的完整实践方案。
本文详解如何在函数组件首次渲染后正确获取 input 元素的初始值，重点解决 `ref` 无法透传至自定义子组件的问题，并提供基于 `forwardref` 和 `useeffect` 的完整实践方案。
在 React 中，若想在组件挂载后读取 DOM 节点（如 ）的初始值（例如 defaultValue 对应的显示值），需确保 ref 能准确绑定到真实 DOM 元素上。你遇到的错误：
"
refis not a prop. Trying to access it will result inundefinedbeing returned."
根本原因在于：普通函数组件默认不支持接收 ref 作为 props；React 将 ref 视为特殊属性，必须显式通过 React.forwardRef 进行转发。
✅ 正确做法：使用 forwardRef 包装子组件
首先，修改 FormRow 组件，用 React.forwardRef 包裹，并将 ref 作为第二个参数接收，再透传给内部 ：
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
import React from "react";
const FormRow = React.forwardRef(
(
{
type,
name,
labelText,
defaultValue = "",
onChange,
onBlur,
max,
},
ref // ✅ ref 现在是独立参数，不再是 props 里的字段
) => {
return (
<div classname="form-row">
<label htmlfor="{name}" classname="form-label">
{labelText || name}
</label>
<input autocomplete="off" type="{type}" id="{name}" name="{name}" classname="form-input" defaultvalue="{defaultValue}" required onchange="{onChange}" onblur="{onBlur}" max="{max}" min="0" ref="{ref}" input dom>
</div>
);
}
);
export default FormRow;
⚠️ 注意：
forwardRef后，ref不再出现在解构的props中，因此原代码中ref从 props 解构的方式（{ ..., ref }）必须移除，否则会报错或静默失效。
✅ 在父组件中安全读取初始值
在 AddProject 中，useRef 创建的引用对象本身不是值——其 .current 属性才指向 DOM 节点。且因 DOM 渲染发生在 useEffect 执行时，必须在 useEffect 中访问 .current，并添加空依赖数组 [] 确保仅在挂载后执行一次：
const AddProject = () => {
const refContainer = useRef(null);
useEffect(() => {
// ✅ 此时 refContainer.current 已指向真实的 input DOM 元素
if (refContainer.current) {
console.log("Initial input value:", refContainer.current.value); // 输出 defaultValue 对应的值（如 "1"）
// 也可用于设置状态、校验、聚焦等操作
// refContainer.current.focus();
}
}, []); // ? 空依赖数组确保只在初始渲染后运行一次
return (
<wrapper><form>
<formrow type="number" name="noOfChemicals" labeltext="Number of Chemicals / Work Items" onchange="{handleChange}" defaultvalue="1" ref="{refContainer}" forwardref></formrow>
</form>
</wrapper>
);
};
export default AddProject;
? 补充说明与最佳实践
-
defaultValuevsvalue：defaultValue仅在首次渲染时生效（受控 vs 非受控模式）。若后续需响应式更新输入框内容，请改用value+onChange受控模式。 -
类型安全（TypeScript 推荐）：为
useRef添加泛型，避免.current类型为any：const refContainer = useRef<htmlinputelement>(null);</htmlinputelement>
-
容错处理：始终检查
ref.current是否存在，防止 SSR 或条件渲染导致的潜在null访问。 -
不要在 render 中读取
.current：DOM 尚未挂载，此时.current为null，会导致逻辑错误或报错。
通过 forwardRef + useRef + useEffect([]) 三者协同，即可稳健、专业地在初始渲染后获取 DOM 节点值，这是 React 函数组件中操作底层 DOM 的标准范式。
