如何在 React 初始渲染时通过 useRef 正确获取 DOM 节点的值-js教程-PHP中文网

如何在 React 初始渲染时通过 useRef 正确获取 DOM 节点的值

本文详解如何在 React 函数组件中，于首次渲染后安全读取 input 元素的值——关键在于正确使用 React.forwardRef 转发 ref，并通过 ref.current.value 访问 DOM 实例。

本文详解如何在 react 函数组件中，于首次渲染后安全读取 input 元素的值——关键在于正确使用 `react.forwardref` 转发 ref，并通过 `ref.current.value` 访问 dom 实例。

在 React 中，useRef 是获取原生 DOM 节点的标准方式，但直接将 ref 作为普通 prop 传递给自定义组件会导致失效——因为 React 不会自动将 ref 属性透传到子组件内部的 DOM 元素上。你遇到的错误提示 "ref is not a prop" 和 refContainer.current 为 null，正是这一机制缺失所致。

✅ 正确做法：使用 `React.forwardRef`

你需要用 React.forwardRef 包裹 FormRow 组件，显式地将父组件传入的 ref “转发”给内部元素：

// FormRow.tsx
import React from 'react';

const FormRow = React.forwardRef<htmlinputelement type: string name: labeltext defaultvalue onchange react.changeevent>) => void;
  onBlur?: (e: React.FocusEvent<htmlinputelement>) => void;
  max?: string;
}>(({
  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}" input>
</div>
  );
});

export default FormRow;</htmlinputelement></htmlinputelement>

? 注意：forwardRef 的第二个参数是 ref，它不再是 props 的一部分，因此必须从 props 解构中移除（如原代码中的 ref prop），否则 TypeScript 会报错，运行时也会被忽略。

vercel-react-best-practices
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性

下载

✅ 在父组件中安全读取初始值

ref.current 在组件挂载完成前为 null，因此必须在 useEffect 中读取，且推荐添加空依赖数组 [] 确保仅在首次渲染后执行：

// AddProject.tsx
import React, { useRef, useEffect } from 'react';

const AddProject = () => {
  const refContainer = useRef<htmlinputelement>(null);

  useEffect(() => {
    // ✅ 此时 refContainer.current 已指向真实 DOM input 元素
    if (refContainer.current) {
      console.log('Initial value:', refContainer.current.value); // 输出 defaultValue="1"
      // 也可用于聚焦、设置选中等操作
      // refContainer.current.focus();
    }
  }, []); // ← 空依赖确保只在挂载后运行一次

  const handleChange = (e: React.ChangeEvent<htmlinputelement>) => {
    console.log('Changed to:', e.target.value);
  };

  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;</htmlinputelement></htmlinputelement>

⚠️ 常见误区与注意事项

❌ 不要将 ref 写在 FormRow 的 props 解构中（如 { ref, ...rest }），它不属于 props；
❌ 不要在 useEffect 外直接访问 refContainer.current.value，此时 DOM 尚未挂载，值为 undefined 或报错；
✅ 推荐为 useRef 添加类型标注（如 useRef(null)），提升类型安全与 IDE 提示；
✅ 若需读取受控组件的“初始状态”，应优先考虑 defaultValue + useState；useRef 更适合操作 DOM 行为（如聚焦、滚动、测量尺寸）；
✅ defaultValue 是非受控属性，若后续通过 value prop 控制输入框，则需切换为受控模式，此时应使用 useState 而非 ref 读取值。