Tengo una duda, estoy trabajando con react
, php
y phpmyadmin
, tengo dos tablas una son usuarios y otra rol.
Aquí les muestro como la tengo:
Aqui les muestro los valores de la tabla roles que quiero que aparezcan en el select
Lo que quiero hacer es que cuando un usuario se registre en el desplegable se muestren las opciones del rol, que son admin, y usuarios
Aqui les muestro la vista del cliente en react
Luego cuando le pulso en el botón registrar usuario quiero insertar los datos en la tabla usuarios
Aquí les dejo el modelo de la clínica
`<?php
require_once "conexion.php" ;
class UsuariosModelo extends ConexionBD{
//registrar usuarios
static public function
RegistrarUsuariosModelo($datosControlador,$tablaBD){
$consultaInsertar="
INSERT INTO $tablaBD (nombre,apellido,movil,dni,email,id_rol)
VALUES (:nombre,:apellido,:movil,:dni,:email,:id_rol)";
$conexion=new ConexionBD(); ;
$query=$conexion->conexionBD()->prepare($consultaInsertar);
$query->bindParam(":nombre",$datosControlador["nombre"],
PDO::PARAM_STR);
$query->bindParam(":apellido",$datosControlador["apellido"],
PDO::PARAM_STR);
$query->bindParam(":movil",$datosControlador["movil"],
PDO::PARAM_STR);
$query->bindParam(":dni",$datosControlador["dni"],
PDO::PARAM_STR);
$query->bindParam(":email",$datosControlador["email"],
PDO::PARAM_STR);
$query->bindParam(":id_rol",$datosControlador["id_rol"],
PDO::PARAM_STR);
if($query ->execute()){
return "bien";
}else{
return "error";
}
$query->close();
}`
Aquí les dejo el controlador de la clínica
`<?php
class UsuariosControlador{
public function RegistrarUsuariosControlador(){
if(isset($_POST["nombreRegistrar"])){
$datosControlador=array(
"nombre"=>$_POST["nombre"],
"apellido"=>$_POST["apellido"],
"movil"=>$_POST["movil"],
"dni"=>$_POST["dni"],
"email"=>$_POST["email"],
"id_rol"=>$_POST["id_rol"]
);
$tablaBD="usuarios";
$respuesta
=UsuariosModelo::RegistrarUsuariosModelo
($datosControlador,$tablaBD);
if($respuesta=="bien"){
// header("location:index.php?ruta=empleados");
echo "bien";
}else{
echo "error";
}
}
}`
La conexión con la BBDD
`<?php
//ACCEDEMOS A LA DEFINICION DE LAS VARIABLES QUE TENEMOS EN
CONFIG.PHP
require_once("../config/config.php");
class ConexionBD{
protected $conexion;
public function getConexion(){
$this->conexion = null;
try {
$this->conexion = new PDO(
'mysql:host='.HOST.
';dbname='.DB.";charset=utf8",
USUARIO,
CLAVE
);
} catch (PDOException $e) {
echo "PDOException: ".$e->getMessage;
}
return $this->conexion;
}
}`
Aqui tengo la vista del registro
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from 'axios';
const Register = (props) => {
let history = useNavigate();
//guardamos los valores de registro del usuario nuevo
const [data, setData] = useState({
nombreUsuario: "",
apellidosUsuario: "",
roles: "",
emailUsuario: "",
passwordUsuario: ""
})
const handleChange = (e) => {
setData({ ...data,
[e.target.name]: e.target.value
});
console.log(data)
}
const submitForm = (e) => {
e.preventDefault();
const sendData = {
nombreUsuario: data.nombreUsuario,
apellidosUsuario: data.apellidosUsuario,
roles: data.roles.value,
emailUsuario: data.emailUsuario,
passwordUsuario: data.passwordUsuario
}
console.log(sendData);
// axios.post('http://localhost/Repositorio/DEW/practicas_react/backend/index.php', sendData)
// .then(response => {
// //hacemos una condicion para saber si el usuario es correcto o no es correcto
// response.data.Status === 'Invalid' ? alert("Usuario Invalido") : history('/Login');
// })
}
return (
<div className = "mx-auto w-50" >
<form data - bitwarden - watching = "1" onSubmit = {submitForm}>
<img className = "mb-4" src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt = "imagen de registro" width = "72" height = "57"/>
<div className = "d-flex gap-2 justify-content-between bg-primary rounded-1 py-2 px-2">
<h1 className = "h3 mb-3 fw-normal text-center text-white"> Registrar usuario nuevo </h1>
<svg xmlns = "http://www.w3.org/2000/svg" width = "40" height = "40" fill = "white" className = "bi bi-person-add" viewBox = "0 0 16 16">
<path d = "M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
<path d = "M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
</svg>
</div>
<div className = "form-floating my-2">
<input type = "text" name = "nombreUsuario" className = "form-control" onChange = {handleChange} value = {data.nombreUsuario}/>
<label for = "floatingInput"> Nombre </label> </div>
<div className = "form-floating my-2">
<input type = "text" name = "apellidosUsuario" className = "form-control" onChange = {handleChange} value = { data.apellidosUsuario }/>
<label for = "floatingInput"> Apellidos </label>
</div>
<div className = "form-group">
<label className = "mb-2">
<svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" fill = "currentColor" className = "bi bi-person-gear me-2" viewBox = "0 0 16 16">
<path d = "M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"/>
</svg>
Rol del usuario
</label>
<select name = "roles" className = "form-select">
<option selected> Opcion de rol de usuario </option>
<option value="1">One</option>
</select>
</div>
<div className = "form-floating my-2" >
<input type = "email" name = "emailUsuario" className = "form-control" onChange = { handleChange } value = { data.emailUsuario }/>
<label for="floatingInput"> Email </label>
</div>
<div className="form-floating my-2">
<input type="password" name="passwordUsuario" className="form-control" onChange={ handleChange } value={ data.passwordUsuario }/>
<label for="floatingPassword">Contraseña</label>
</div>
<button className="w-100 btn btn-lg btn-primary" type="submit"> Registrar usuario </button>
</form>
</div>
)
}
export default Register;
Como podéis observar el rol nunca se muestra el valor
Lo que pasa que al introducir los datos cuando va a enviar los datos, desaparecen algunos datos anteriores
Alguien me puede ayudar?
handleChange
?, estas realizando un comportamient innecesario cada vez de que uninput
tiene un evento change, pues en la functionhandleSubmit
puedes obtener todos los valores ingresados en todos tusinputs
del formulario