本文详解如何在 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 “转发”给内部 <input> 元素：

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

const FormRow = React.forwardRef<HTMLInputElement, {
  type: string;
  name: string;
  labelText?: string;
  defaultValue?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => 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} // ✅ ref 现在能正确绑定到 input 上
      />
    </div>
  );
});

export default FormRow;

? 注意：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} // ✅ 正确传递 ref
        />
      </Form>
    </Wrapper>
  );
};

export default AddProject;

⚠️ 常见误区与注意事项

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

通过以上改造，你就能在组件首次渲染完成后，准确、可靠地获取并操作 DOM 节点的值与行为。