React使用useRef获取子组件input值返回None的问题排查

开发者阿泽

2026-9-2

问题分析

代码拿不到输入框值的核心错误有4个：

父组件导入不全：使用了useState钩子但只从react中引入了useRef，运行时会直接抛出useState未定义的错误。
变量声明不规范：inputRef = useRef(null) 漏写了const声明，属于隐式全局变量，严格模式下会直接报错。
核心错误：函数组件默认不支持直接接收ref作为props传递。ref是React的特殊保留属性，你在子组件props中解构ref拿到的永远是undefined，导致父组件传入的inputRef根本没有绑定到实际的input DOM上，取值自然为null。
子组件类型定义错误：Props中声明了ref字段，还额外解构了未定义的value属性，存在类型错误。

修复方法

函数组件要接收外部传入的ref并绑定到内部DOM，必须使用React.forwardRef做ref转发，同时修正上述语法问题。

修正后的父组件代码

import React, { useRef, useState } from "react";
import Child from "./path/to/Child"; // 替换为你的子组件实际路径

const Parent= () => {
  // 补全const声明
  const inputRef = useRef(null)
  
  const initData = {
      inputVal: [],
  }; 

  const [data, setData] = useState(initData);

  async function fetchData(e) {
    e?.preventDefault();
    const response = await POST("/api", {
      input: inputRef.current?.value,
    });
    const json = await response.json();
    setData({
      inputVal: json.inputVal,
    });
  }

  return (
    <form onSubmit={fetchData}>
        <Child ref={inputRef} />
        <button type="submit">提交</button>
    </form>
  );
};

export default Parent;

修正后的子组件代码

import React from "react";

// 使用forwardRef包裹组件，接收外部传入的ref
const Child = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input type="number" ref={ref} />;
});

export default Child;