0

hago este post porque se me presento un problema al hacer un formulario de registro utiliznado React Hooks + Firebase,

El problema consiste en que segun cualquier cosa que toque, este automaticamente se envia a la base de datos,

Aca el formulario de registro:

import React, { useState } from 'react'
import '../css/login-register/login.css'
import firebase from "../firebase";
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'


const Register = (e) => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

const miSubmit = () => {

  const auth = getAuth()
  createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    console.log('Registrado')
    const user = userCredential.user
    // ...
  })
  .catch((error) => {
    const errorCode = error.code
    const errorMessage = error.message
    console.log('error: ' + errorMessage + 'Error code  ' + errorCode)
    
  })

  e.preventDefault();
        console.log('Ejecutando submit sin evento');
}

  
    return (
      <div>
        <form action=""  onSubmit={miSubmit}>

        <input type="text" 
        id="email" 
        placeholder="Email"
        onChange={(e) => setEmail(e.target.value)}/>

        <input type="password" 
        placeholder="Password" 
        onChange={(e) => setPassword(e.target.value)}/>
        <input className="waves-effect waves-light btn" type='submit' name="Register" value='registro' />
            </form>
      </div>
    )
  }

export default Register

1 respuesta 1

1

múltiples problemas.

  1. uno que tu onSubmit hace referencia al mismo componente Register el cual no debe ser así.
  2. Colocas el código de createUserWithEmailAndPassword directamente dentro del componente, lo cual ocaciona que se ejecute siempre al usar setEmail o setPassword.
  3. Tu método onSubmit nunca se ejecutará si los input no están dentro de tu form, sobre todo tu input de tipo submit

Para ver a simple vista el problema ocasionado por setEmail o setPassword coloquemos un console.log() dentro del componente para ver como se imprime y ejecuta cada ves que escribimos en los input

Esto unicamente a modo de ejemplo y mostrar lo que sucede cada ves que escribes y el por que de tu problema

const Register = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    console.log('Ejecutando todo código dentro de form----');
    ...

Solución al problema

Problema 1 y 2

Para solucionar tu problema, debemos crear un método que se ejecutara unicamente cuando sea el submit y colocarlo en el onSubmit

const Register = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    console.log('Ejecutando todo código dentro de form----');

    const miSubmit = () => {
        const auth = getAuth()
        createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                console.log('Logeado')
                const user = userCredential.user
                // ...
            })
            .catch((error) => {
                const errorCode = error.code
                const errorMessage = error.message
                console.log('error: ' + errorMessage)
            })
    }

return (
        <div className="input-field col s6">
            <form action="" onSubmit={miSubmit}>
       //....

Problema 3

Tu form debe contener los input que controlara o necesitara, incluyendo el submit.

return (
        <div className="input-field col s6">
            <form action="" onSubmit={miSubmit}>
                <input type="text"
                    className="validate"
                    id="email"
                    value={email}
                    placeholder="Email"
                    onChange={(e) => setEmail(e.target.value)} />

                <input placeholder="Password"
                    onChange={(e) => setPassword(e.target.value)} />
                <input className="waves-effect waves-light btn" type='submit' name="Register" value='registro' />
            </form>
        </div>
    )

Tu código en general debe quedar algo como esto.

const Register = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    console.log('Ejecutando todo código dentro de form----');

    const miSubmit = () => {
        const auth = getAuth()
        createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                console.log('Logeado')
                const user = userCredential.user
                // ...
            })
            .catch((error) => {
                const errorCode = error.code
                const errorMessage = error.message
                console.log('error: ' + errorMessage)
            })
    }


    return (
        <div className="input-field col s6">
            <form action="" onSubmit={miSubmit}>
                <input type="text"
                    className="validate"
                    id="email"
                    value={email}
                    placeholder="Email"
                    onChange={(e) => setEmail(e.target.value)} />

                <input placeholder="Password"
                    onChange={(e) => setPassword(e.target.value)} />
                <input className="waves-effect waves-light btn" type='submit' name="Register" value='registro' />
            </form>
        </div>
    )
}

Evitar recarga de pagina al usar submit

para esto unicamente recibimos el evento y utilizamos e.preventDefault()

ejemplo

const miSubmit = (e) => {
        e.preventDefault();
        console.log('Ejecutando submit sin evento');
    }
10
  • Muchas gracias Richard, funciono a la perfeccion, te queria hacer una ultima consulta, y es que al darle click a registrar, esto hace que la pagina se actualice y no alcance a ver el console.log que me deberia decir si hay algun problema o no, hay alguna forma de hacer que esto no suceda? Muchas gracias el 29 sep. 2021 a las 19:08
  • @HatoriHanso Actualice mi respuesta y agregue un ejemplo para usar e.preventDefault() al final de la respuesta, que te ayudara con lo que quieres
    – Richard
    el 29 sep. 2021 a las 19:15
  • Hola Richard, no me funciona, la pagina se sigue refrescando cuando le doy click al boton el 29 sep. 2021 a las 19:31
  • @HatoriHanso revisaste que este bien aplicado ? tal cual como en el ejemplo? recuerda que tu submit del form debe estar de la siguiente forma onSubmit={miSubmit}
    – Richard
    el 29 sep. 2021 a las 19:36
  • @HatoriHanso Revisa que este bien escrito e.preventDefault() las mayúsculas y minúsculas. también recuerda que e debe recibirse como parámetro en tu función const miSubmit = (e) => {} . Una ves ayas revisado todo eso, informa si te funciona o no.
    – Richard
    el 29 sep. 2021 a las 19:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.