0

estoy intentando editar un input que carga con un valor predeterminado, pero no soy capaz de modificarlo porque es un componente controlado. En YouTube he visto un ejemplo he hecho lo mismo pero no me funciona porque tengo varios estados y el ejemplo es solo con uno. Os comento, necesito editar el titulo de una noticia, he probado de todo y no me funciona. Lo que me ha ocurrido mientras he probado son dos casos, o se ve lo que escribo en el campo como si editara pero al hacer el PUT no se guarda o bien no me deja ni escribir como si solo fuera de lectura Os pongo el código. Me carga el titulo con una llamada a la api y lo hace bien. Gracias de antemano y Un saludo.

Estados y useEffect con el metodo que rellena el campo:

    const [editTitle, setEditTitle] = useState(""); 
    const [titleEs, setTitleEs] = useState("");


  const {id} = useParams();

    React.useEffect(() => {
    
      requestGetNewById(setEditTitle, id);
     
    },[id])  

Cargo el input con lo que me viene del GET que me trae el titulo con su id:

  <input 
            
          onChange={event => setTitleEs(event.target.value)}  // modifica la entrada(Edición)
           type="text" 
           value={editTitle.titleEs}/>//carga el valor
               

Función que envia el body y básicamente hace el PUT:

  function updateNews () {

      const body = {
        titleEs: titleEs,
   

      }  
  
      console.log(body);
      RequestPutNew(id,body)
   
    }

1 respuesta 1

0

Hola chicos lo he conseguido solucionar. Lo que he hecho es lo siguiente:

 const [editTitle, setEditTitle] = useState(""); 
    const [title, setTitle] = useState("");


  const {id} = useParams();

    React.useEffect(() => {
    
      getData();
     
    },[id]) 



const getData = async() => {

  const headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + getToken()
  }

  const url = "miUrl" + `/${id}`; 
  const data = await axios.get(url, { 'headers':  headers })   
  const dataNew = await data.data;
 

    requestGetNewById(setEditNews, id);
    setTitle(dataNew.title);

}


function updateNews () {
      const body = {
        title: title

}

 RequestPutNew(id,body);

}


return (

<>


  <input 
            
          onChange={event => setTitle(event.target.value)}  // modifica la entrada(Edición)
           type="text" 
           value={title}/>//carga el valor
</>



)
 

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.