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;Lo anterior es un componente para una página de registro para una aplicación web, y estoy siguiendo este video usando refs y firebase para trabajar con un botón para actualizar la base de datos: https://www.youtube.com/watch?v=_Kv965pA -j8
Sin embargo, cada vez que hago clic en el botón, aparece este error: Rechazo no controlado (Error de tipo): No se pueden leer las propiedades de undefined (leyendo 'valor')
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.¿Cómo puedo arreglar esto? Mi plan original tenía un componente separado para el botón, pero eso no funcionaba, así que ahora solo intento que todo funcione en el mismo componente.
Código de entrada de autenticación:
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 AuthInputSi desea lanzar referencias principales a componentes secundarios, debe usar forwardRef en child. Documentos
Ejemplo de componente AuthInput correcto:
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;