React使用useRef绑定自定义AuthInput报reading 'value'错误如何解决

错误原因 #

报错是自定义函数组件ref转发失败导致的：
React中ref属于特殊属性，不会作为普通props传递给自定义函数组件。你在父组件为<AuthInput />绑定ref时，AuthInput内部无法通过props.ref拿到这个ref，导致内部原生input没有和你声明的emailRef/passwordRef绑定，最终访问emailRef.current.value时，emailRef.current为undefined，触发类型错误。

修复步骤 #

• 用React.forwardRef包裹AuthInput组件，接收父组件传递的ref并绑定到内部原生input上，修改后的AuthInput代码如下：

import React from 'react'

const AuthInput = React.forwardRef((props, 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={props.type}
                ref={ref}
                placeholder={props.placeholder}
            />
        </div>
    )
})

export default AuthInput

• 父组件Signup的现有逻辑无需修改，修改后ref就可以正常拿到input实例，不会再报undefined错误。

可选优化 #

可以补充两个逻辑避免后续异常：

1. 提交前校验两次输入的密码是否一致
2. 为signup异步调用添加catch捕获异常，避免未处理的Promise报错
   优化后的handleSignup参考：

async function handleSignup() {
  // 防止ref未挂载的边界情况
  if (!emailRef.current || !passwordRef.current || !passwordConfirmRef.current) return
  const email = emailRef.current.value
  const pwd = passwordRef.current.value
  const confirmPwd = passwordConfirmRef.current.value
  if (pwd !== confirmPwd) {
    alert('两次输入密码不匹配')
    return
  }
  try {
    await signup(email, pwd);
  } catch (err) {
    console.error('注册失败：', err)
    alert(`注册失败：${err.message}`)
  }
}

内容的提问来源于stack exchange，提问作者outofthegravity