如何在初次渲染时从DOM节点获取值

Question

我正在尝试在初始渲染时通过使用useRef从输入文本框中读取一个值，但遇到了以下错误消息：

“ref不是一个prop。尝试访问它将导致返回undefined。如果你需要在子组件内部访问相同的值，你应该将其作为不同的prop传递。”

这是我的组件代码：

当我打印"name"时，得到的是null。

const AddProject = () => {
  const refContainer = useRef(null);
  const name = refContainer;
  useEffect(() => {
    console.log(name);
  });
  return (
    
      
        
      
    
  );
};
export default AddProject;

我的FormRow组件如下所示。我正尝试将'ref'作为prop传递。

import React from "react";

const FormRow = ({
  type,
  name,
  labelText,
  defaultValue = "",
  onChange,
  onBlur,
  max,
  ref,
}) => {
  return (
    
      
        {labelText || name}
      
      
    
  );
};

export default FormRow;

能否有人帮我解决这个问题？

never_had_a_name · Answer

首先，当你将引用传递给子组件时，需要使用forwardRef函数将其转发至子组件的父级DOM元素。

const FormRow = React.forwardRef(
  ({ type, name, labelText, defaultValue = "", onChange, onBlur, max }, ref) => {
    return (
      
        
          {labelText || name}
        
        
      
    );
  }
);

接下来，在你的AddProject组件中，你需要使用useEffect Hook，并配合依赖数组，以便在首次渲染后记录输入值。为了获取真实的DOM元素，你还应该访问ref对象的current属性。

useEffect(() => {
    console.log(refContainer.current.value);
}, []);

Timmmm · Answer

你遇到的问题与React中refs的处理方式有关。当在类似FormRow的子组件中使用ref时，需要正确地转发它才能按预期工作。

问题在于你如何在FormRow组件中传递ref属性。在函数式组件中，相对于普通props，refs的处理方式有所不同。你不能直接传递ref prop，而应该使用React.forwardRef来妥善处理。

以下是修改FormRow组件以正确处理ref的方法：

import React from "react";

const FormRow = React.forwardRef(
  (
    { type, name, labelText, defaultValue = "", onChange, onBlur, max },
    ref
  ) => {
    return (
      
        
          {labelText || name}
        
        
      
    );
  }
);

export default FormRow;

然后，在你的AddProject组件中，你可以继续像之前那样使用useRef：

  const refContainer = useRef(null);
  const name = refContainer.current?.value; // 通过current访问值
  useEffect(() => {
    console.log(name);
  }, [name]); // 将name包含在依赖数组中以便记录变化

这个改动将允许你在AddProject组件中使用useRef Hook正确地访问输入框的值。