0

gente, espero me pueda ayudar.

Sucede que estoy creando un formulario en React donde van a pasar unos datos simples pero uno de ellos, que es un input, ya tiene un valor por defecto el cual no pasa por mi función.

Hago uso de UseSate para controlar los datos dentro del formulario:

const [newMateria, setNewMateria] = React.useState(); 

Hago que a través del value de cada etiqueta de mi formulario, se guarde en el estado.

const handleChangeMateria = (e) => setNewMateria({...newMateria, [e.target.name] : e.target.value}); 

Con esta función paso los parámetros guardados del estado para enviarselos por POST a mi api

  const addMateria = async () =>{
            await fetch(`https://api.com/api/defaultApi`,
             {method: "POST", headers: { "Content-type": "application/json; charset=UTF-8" }, 
            body: JSON.stringify(newMateria)}).then(response => response.json()) 
            .then(json => console.log(json))
            .catch(error => console.error(`error al agregar materia ${error}`));
            }    

Mi formulario

<form onSubmit={handleSubmitMateria} id="asinacionMateria"  method="POST">
        <Input onChange={handleChangeMateria} name="idAlumno" aria-label="none" css={{marginBottom:"15px"}}  
        required placeholder="Nombre Completo"  value={id} ></Input>
        <label>Materia</label>
           <select onChange={handleChangeMateria} name="idMateria" style={{marginBottom:"15px"}} >
            <option defaultValue>Selecciona una Materia</option>
            {Materias.map(e=> <option key={e._id} value={e._id} >{e.nombreMateria}</option>)}
           </select>
           <label>Bloque</label>
           <select onChange={handleChangeMateria} name="bloque" style={{marginBottom:"15px"}} >
              <option defaultValue>Selecciona un Bloque</option>
              <option aria-label="none"  value={"1"}>BLOQUE 1</option>
              <option aria-label="none"  value={"2"}>BLOQUE 2</option>
              <option aria-label="none"  value={"3"}>BLOQUE 3</option>
              <option aria-label="none"  value={"4"}>BLOQUE 4</option>
           </select>
           <label>Fecha Inicio</label>
           <Input  onChange={handleChangeMateria} 
           id="fechaInicio"  name="fechaInicio" css={{marginBottom:"15px"}}aria-label="none"  type={"date"}></Input>
           <label>Fecha Fin</label>
           <Input  onChange={handleChangeMateria}  
           id="fechaFin" name="fechaFin" css={{marginBottom:"15px"}}aria-label="none"  type={"date"}></Input>
           <Button aria-label="none" auto type="submit" >Guardar</Button>
         </form> 

Todo funciona correctamente, excepto cuando pones un value por defecto, como lo hago en el input "idAlumno". Si a este le escribo a mano lo que quiero pasarle, si lo guarda y lo envía.

2
  • Lo que haces en el input idalumno no es poner un valor por defecto, el valor por defecto depende de la libreria pero suele ser defaultValue. Lo que tu estás haciendo es hacer que el componente sea controlado. Debes definir el valor en la variable de estado. const [newMateria, setNewMateria] = React.useState({idAlumno: "valor"}); y luego en el componente: value={newMateria?.idAlumno}
    – Suso
    Commented el 10 feb. 2023 a las 23:17
  • muchas gracias, ya entendí. Me salvaste, amigo
    – herb
    Commented el 13 feb. 2023 a las 17:42

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.