本文详解如何在函数组件首次渲染后正确获取 input 元素的初始值，重点解决 ref 无法透传至自定义子组件的问题，并提供基于 forwardRef 和 useEffect 的完整实践方案。
本文详解如何在函数组件首次渲染后正确获取 input 元素的初始值，重点解决 `ref` 无法透传至自定义子组件的问题，并提供基于 `forwardref` 和 `useeffect` 的完整实践方案。
在 React 中，若想在组件挂载后读取 DOM 节点（如 <input>）的初始值（例如 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 作为第二个参数接收，再透传给内部 <input>：
来自 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 后可直接传入
/>
</Form>
</Wrapper>
);
};
export default AddProject;? 补充说明与最佳实践
-
defaultValuevsvalue：defaultValue仅在首次渲染时生效（受控 vs 非受控模式）。若后续需响应式更新输入框内容，请改用value+onChange受控模式。 -
类型安全（TypeScript 推荐）：为
useRef添加泛型，避免.current类型为any：const refContainer = useRef<HTMLInputElement>(null);
-
容错处理：始终检查
ref.current是否存在，防止 SSR 或条件渲染导致的潜在null访问。 -
不要在 render 中读取
.current：DOM 尚未挂载，此时.current为null，会导致逻辑错误或报错。
通过 forwardRef + useRef + useEffect([]) 三者协同，即可稳健、专业地在初始渲染后获取 DOM 节点值，这是 React 函数组件中操作底层 DOM 的标准范式。
