未处理的拒绝 (TypeError)：在 React 中使用 useRef 时无法读取未定义的属性（读取 'value'）

Question

import React from "react";
import { useRef } from "react";
import AuthButton from "../components/AuthButton";
import AuthContainer from "../components/AuthContainer";
import AuthInput from "../components/AuthInput";
import { signup } from "../firebase"

function Signup() {
  const emailRef = useRef();
  const passwordRef = useRef();
  const passwordConfirmRef = useRef();

  async function handleSignup() {
    await signup(emailRef.current.value, passwordRef.current.value);
  }

  return (
    <AuthContainer>
      <AuthInput ref={emailRef} placeholder="  email" />
      <AuthInput ref={passwordRef} type="password" placeholder="  password" />
      <AuthInput ref={passwordConfirmRef} type="password" placeholder="  confirm password" />
      <div className="flex justify-center text-lg text-gray-500 pt-2 pb-5">
        {/* <AuthButton text="sign up" /> */}
          <button onClick={handleSignup}>
        {
          <div className="p-1 rounded-full bg-gray-200 hover:bg-gray-300 bg-opacity-50 text-center h-8 w-20">
            sign up
          </div>
        }
    </button>
      </div>
    </AuthContainer>
  );
}

export default Signup;

以上是网络应用程序注册页面的组件，我正在使用 refs 和 firebase 观看此视频，以使用按钮更新数据库：https://www.youtube.com/watch?v=_Kv965pA-j8

但是，每当我单击该按钮时，都会出现此错误：未处理的拒绝 (TypeError)：无法读取未定义的属性（读取 'value'）

handleSignup
  11 |  const passwordConfirmRef = useRef();
  12 | 
  13 |  async function handleSignup() {
> 14 |    await signup(emailRef.current.value, passwordRef.current.value);
     | ^  15 |  }
  16 | 
  17 |  return (
View compiled
▶ 19 stack frames were collapsed.

我该如何解决这个问题？我最初的计划是为按钮提供一个单独的组件，但那没有用，所以现在我只是试图让所有东西都在同一个组件中工作。

授权输入代码：

import React from 'react'
import { useRef } from "react";

const AuthInput = (props) => {
    return (
        <div className='pt-2 pb-2 px-20 mx-auto my-auto'>
            <input
                className="rounded-lg focus:outline-none text-lg placeholder-gray-500"
                type={props.type}
                ref = {props.ref}
                placeholder={props.placeholder}
                // later figure out how to automatically indent the placeholder text and the inputted text
            />
            
        </div>
    )
}

export default AuthInput

Answer 1

如果你想将父 refs 扔给子组件，你必须在子组件中使用 forwardRef。 Docs

正确的 AuthInput 组件示例：

import { forwardRef } from "react";
const AuthInput = forwardRef(({ ...otherProps }, ref) => {
  return (
    <div className="pt-2 pb-2 px-20 mx-auto my-auto">
      <input
        className="rounded-lg focus:outline-none text-lg placeholder-gray-500"
        type={otherProps.type}
        ref={ref}
        placeholder={otherProps.placeholder}
        // later figure out how to automatically indent the placeholder text and the inputted text
      />
    </div>
  );
});

export default AuthInput;

未处理的拒绝 (TypeError)：在 React 中使用 useRef 时无法读取未定义的属性（读取 'value'）

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'value') when working with useRef in React

javascript

reactjs

use-ref