2

Mi intención es hacer un método de autenticación en react con un modal de Bootstrap La idea es que el modal aparezca automaticamente al iniciar la clase y al pulsar en aceptar llame a la función handleloginClick pasandole el username y password y esta despues de llamar al servidor, devuelva cualquier cosa. Llevo un mes leyendo sobre react y aun no me entero mucho.

Este es el código.

import React, { Component } from 'react';

class Login extends Component {
   constructor(props) {
        super(props);
        this.state = {
           username: "",
            password: "",
        };

                this.handleloginClick = this.handleloginClick.bind(this);
                this.handleUsernameChange = this.handleUsernameChange.bind(this);
                this.handlePasswordChange = this.handlePasswordChange.bind(this);

    } //end constructor


    componentDidMount() {
      const modal = document.querySelector('#writeData');
      modal.classList.add('show');
    }


    handleloginClick(event) {
      const username = this.state.username
      const password = this.state.password

      const datos = {
        username: username,
        password: password
  }


      fetch('https://prct/login.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: datos
      }) 

        .then(function(datos) {
          console.log('datos =', datos);
          return datos.json();
      })

}



handleUsernameChange(event) {
  this.setState({username: event.target.value});
}

handlePasswordChange(event) {
  this.setState({password: event.target.value});
}

render() {
  return (
     <div className="modal fade" id="writeData" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">

            <h4 className="modal-title" id="exampleModalLabel">Identificaci&oacute;n</h4>
            </div>

              <div className="modal-body">
                <div className="form-group">
                  <label className="control-label label-default">Usuario:</label>
                  <input type="text" className="form-control input-sm" id="usr" data-toggle="tooltip" data-placement="top" onChange={this.handleUsernameChange} value={this.state.username}   required />
                  </div>
                   <div className="form-group label-default">
                  <label  className="control-label">Clave:</label>
                  <input type="password" className="form-control input-sm" id="pass" data-toggle="tooltip" data-placement="bottom" onChange={this.handlePasswordChange} value={this.state.password}  required />
                  </div>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="submit" className="btn btn-primary "  onClick={this.handleloginClick}  id="btnEnviar">Aceptar</button>
              </div>

          </div>
        </div>
      </div>
    );
  }
}

export default Login;

2 respuestas 2

3

Viendo tu código necesitas separar la lógica tus campos (username y password) con la función handleLoginClick.

Te falta agregar unas funciones (handleUsernameChange y handlePasswordChange), las cuales puedan sincronizar lo que tienes en los campos con el estado del componente, algo de esta forma:

import React, { Component } from 'react';

class Login extends Component {
   constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
        };

                this.handleloginClick = this.handleloginClick.bind(this);
                this.handleUsernameChange = this.handleUsernameChange.bind(this);
                this.handlePasswordChange = this.handlePasswordChange.bind(this);

    } //end constructor

    handleloginClick(event) {
      const username = this.state.username
      const password = this.state.password

      const datos = {
            username: username,
            password: password
      }

      fetch('http://theapi/api/auth', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
             body: JSON.stringify(datos)
      }) /*end fetch */

        .then(function(data) {
          console.log('data =', response);
          return data.json();
      })
        }

        handleUsernameChange(event) {
            this.setState({username: event.target.value});
        }

        handlePasswordChange(event) {
            this.setState({password: event.target.value});
        }

    render() {
      return (
         <div className="modal fade" id="writeData" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">

                <h4 className="modal-title" id="exampleModalLabel">Identificaci&oacute;n</h4>
                </div>

                  <div className="modal-body">
                    <div className="form-group">
                      <label className="control-label label-default">Usuario:</label>
                      <input type="text" className="form-control input-sm" id="usr" data-toggle="tooltip" data-placement="top" onChange={this.handleUsernameChange} value={this.state.username}   required />
                      </div>
                       <div className="form-group label-default">
                      <label  className="control-label">Clave:</label>
                      <input type="password" className="form-control input-sm" id="pass" data-toggle="tooltip" data-placement="bottom" onChange={this.handlePasswordChange} value={this.state.password}  required />
                      </div>
                  </div>
                  <div className="modal-footer">
                    <button type="button" className="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" className="btn btn-primary "  onClick={this.handleloginClick}  id="btnEnviar">Aceptar</button>
                  </div>

              </div>
            </div>
          </div>
        );
      }
}

export default Login;
3
  • Gracias por la respuesto Moz. Tengo un error aqui console.log('data =', response); Creo que debería ser console.log('data =', data); no? En tu código faltaría llamar al modal que lo podría hacer como me dice el compañero Benjamin Commented el 13 mar. 2019 a las 17:23
  • Efectivamente, ahi response no existe, tu respuesta se llama data. De igual forma tienes que ver si el método .json() existe en tu respuesta.
    – Moz
    Commented el 13 mar. 2019 a las 18:24
  • Por alguna razón, no se me abre el modal cuando llamo a la classe, se que la clase la llamo bien ya que si le pongo un texto en login lo muestra en index pero el modal no lo muestra al iniciar, alguna idea? Commented el 14 mar. 2019 a las 8:26
2

Esto es lo que te aconsejo para lo que quieres lograr:

el modal aparezca automáticamente al iniciar la clase

componentDidMount() {
  const modal = document.querySelector('#writeData');
  modal.classList.add('show');
}

Recuerda que la función componentDidMount es ejecutada según el ciclo de vida de un Component de React, justo después de que el HTML es añadido a la página.

al pulsar en aceptar llame a la función handleloginClick pasandole el username y password y esta despues de llamar al servidor, devuelva cualquier cosa.

handleloginClick(event) {
  this.setState({username: document.querySelector('#usr').value});
  this.setState({password: document.querySelector('#pass').value});
  ...fetch
}

Esta parte del código tiene por si solo algunos detalles, lo que pasa con tu código actualmente es que la función handleloginClick nunca va a tener el target.value en el evento puesto que el botón es el que acciona el evento. Por eso debes tener otra manera de llamarlo, la que yo te propongo no es la mejor, pero es la que va a ser que no hagas tantas modificaciones en tu código actual.

2
  • Gracias por la respuesta, se que el código esta muy verde, voy leyendo de unos sitios y de otros e intento construir algo. Commented el 13 mar. 2019 a las 17:11
  • Tu código no es que este verde, es solo que necesitas familiarizarte con la lógica detrás de React en vez del código, la respuesta de Moz es digamos la forma en la que tienes que usar la "lógica" de React para obtener la información de los campos, pero me parece que hace falta explicar un poco porque es que funciona en vez de poner solo el código, razón por la que no la puse así...
    – user119618
    Commented el 13 mar. 2019 a las 17:18

Tu Respuesta

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

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