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ó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;