0

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:

introducir la descripción de la imagen aquí

Aqui les muestro los valores de la tabla roles que quiero que aparezcan en el select

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

Lo que pasa que al introducir los datos cuando va a enviar los datos, desaparecen algunos datos anteriores introducir la descripción de la imagen aquí

Alguien me puede ayudar?

9
  • El codigo NO SE SUBE COMO IMAGEN, para eso en las herramientas de redaccion de la pregunta tienes herrramientas que permiten insertar codigo en formato texto., lee Cómo preguntar. El problema lo tienes en el front end por lo que veo, antes de enviar el codigo desde el cliente al servidor, es correcto?
    – David081
    Commented el 22 dic. 2022 a las 11:30
  • si en el select, ese es el único campo que no me coge los valores, en cuanto a lo de las imágenes ahora lo subo en código Commented el 22 dic. 2022 a las 11:40
  • Pero porque ese funcionhandleChange?, estas realizando un comportamient innecesario cada vez de que un input tiene un evento change, pues en la function handleSubmit puedes obtener todos los valores ingresados en todos tus inputs del formulario
    – David081
    Commented el 22 dic. 2022 a las 11:53
  • No se estoy empezando con react, vi un ejemplo que me podía servir y lo cogí xD Commented el 22 dic. 2022 a las 12:18
  • no entiendo handleSubmit, es donde recojo, todos los datos incluidos el select? Commented el 22 dic. 2022 a las 12:19

1 respuesta 1

0

Para mostrar las opciones de la tabla roles en un select de un formulario de React, primero necesitas obtener los datos de la tabla roles desde la base de datos. Una forma de hacerlo es mediante una petición HTTP a una API que tengas implementada en tu servidor PHP, que se encargue de realizar la consulta a la base de datos y devolver los datos en formato JSON.

Posteriormente, en tu componente de React que contenga el formulario, podrías utilizar una función que se ejecute cuando se monte el componente (por ejemplo, useEffect) para realizar la petición a la API y obtener los datos de la tabla roles. Una vez que tengas los datos, podrías guardarlos en el estado del componente y usarlos para renderizar las opciones del select.

Por ejemplo:


import React, { useEffect, useState } from 'react';

function Formulario() {
  const [roles, setRoles] = useState([]);

  useEffect(() => {
    async function fetchRoles() {
      const res = await fetch('/api/roles');
      const data = await res.json();
      setRoles(data);
    }
    fetchRoles();
  }, []);

  return (
    <form>
      <label>Rol:</label>
      <select name="id_rol">
        {roles.map(rol => (
          <option value={rol.id}>{rol.nombre}</option>
        ))}
      </select>
      ...
    </form>
  );
}


En cuanto a la inserción de datos en la tabla usuarios, puedes seguir utilizando la lógica que ya tienes implementada en tu controlador PHP. Lo único que necesitarías hacer es enviar una petición HTTP desde tu componente de React hacia tu servidor PHP con los datos del formulario, utilizando una función que se ejecute cuando se haga submit en el formulario (por ejemplo, un evento onSubmit).

Por ejemplo:


import React, { useState } from 'react';

function Formulario() {
  const [formData, setFormData] = useState({
    nombre: '',
    apellido: '',
    movil: '',
    dni: '',
    email: '',
    id_rol: ''
  });

  const handleChange = e => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async e => {
    e.preventDefault();
    const res = await fetch('/api/usuarios', {
      method: 'POST',
      body

1
  • se muestra igual "" Commented el 23 dic. 2022 a las 12:03

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.