Skip to main content
título editado
Enlace
Lorenzo Martín
  • 739
  • 4
  • 24
  • 55

Llamar a modamodal bootstrap desde react

se eliminaron 22 caracteres en el cuerpo
Origen Enlace
Lorenzo Martín
  • 739
  • 4
  • 24
  • 55
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://privada.mgsehijos.es/reactprct/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;
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://privada.mgsehijos.es/react/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;
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;
se añadieron 10 caracteres en el cuerpo
Origen Enlace
Lorenzo Martín
  • 739
  • 4
  • 24
  • 55
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('http'https://theapiprivada.mgsehijos.es/apireact/auth'login.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: JSON.stringify(datos)
      }) 
        
        .then(function(datadatos) {
          console.log('data'datos =', datadatos);
          return datadatos.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;
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('http://theapi/api/auth', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: JSON.stringify(datos)
      }) 
        
        .then(function(data) {
          console.log('data =', data);
          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;
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://privada.mgsehijos.es/react/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;
Pongo los cambios que me aconsejan los compañeros
Origen Enlace
Lorenzo Martín
  • 739
  • 4
  • 24
  • 55
Loading
Origen Enlace
Lorenzo Martín
  • 739
  • 4
  • 24
  • 55
Loading