本文详解如何在函数组件初次渲染后，安全读取 input 元素的值——关键在于正确使用 React.forwardRef 转发 ref，并通过 ref.current 访问真实 DOM 节点。
本文详解如何在函数组件初次渲染后，安全读取 input 元素的值——关键在于正确使用 `react.forwardref` 转发 ref，并通过 `ref.current` 访问真实 dom 节点。
在 React 中，useRef 是获取原生 DOM 节点的标准方式，但不能直接将 ref 作为普通 prop 传递给自定义组件——否则会触发警告：“ref is not a prop”，且 refContainer.current 始终为 null。这是因为 React 对 ref 进行了特殊处理，需显式通过 React.forwardRef 向下透传。
✅ 正确做法：使用 forwardRef 包装子组件
首先，修改 FormRow 组件，用 React.forwardRef 包裹，并将 ref 作为第二个参数接收（而非解构自 props）：
import React from "react";
const FormRow = React.forwardRef(
({ type, name, labelText, defaultValue = "", onChange, onBlur, max }, ref) => {
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}" forwardref>
</div>
);
}
);
export default FormRow;
⚠️ 注意：
forwardRef的回调函数签名是(props, ref) => JSX，ref不在props中，因此不能再从解构中读取ref—— 否则会导致透传失败。
vercel-react-best-practices下载来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
✅ 在父组件中安全读取初始值
在 AddProject 中，useRef 创建的引用需通过 .current 访问其绑定的 DOM 元素，再读取 .value。同时，useEffect 应添加空依赖数组 []，确保仅在挂载后执行一次：
const AddProject = () => {
const refContainer = useRef(null);
useEffect(() => {
// ✅ 确保 DOM 已挂载，且 ref 已绑定
if (refContainer.current) {
console.log("Initial input value:", refContainer.current.value); // 输出 "1"
}
}, []); // ? 仅在初始渲染后执行
return (
<wrapper><form>
<formrow type="number" name="noOfChemicals" labeltext="Number of Chemicals / Work Items" onchange="{handleChange}" defaultvalue="1" ref="{refContainer}"></formrow>
</form>
</wrapper>
);
};
export default AddProject;
? 补充说明与最佳实践
-
defaultValue≠value：defaultValue仅设置初始值（受控模式下无效），ref.current.value读取的是当前 DOM 状态，适用于非受控场景。 -
防御性访问：始终检查
ref.current是否存在，避免Cannot read property 'value' of null错误。 - 若需响应式同步（如输入实时更新状态），应改用受控组件（
value+onChange），而非依赖ref。 -
forwardRef是必要步骤：任何中间组件若需透传 ref 至底层 DOM，都必须用React.forwardRef包装。
掌握 forwardRef 与 useRef 的协同机制，是构建可复用、可访问、可测试表单组件的关键基础。
