Así que estoy aprendiendo sobre cómo usar la entrada de formulario en mis proyectos de la aplicación React. No estoy muy seguro de cómo hacerlo, los accesorios realmente no parecen ser suficientes. Entonces, si tengo dos componentes, uno con un formulario y otro que solo quiero mostrar la entrada. No quiero representar los dos componentes a la vez, sino que deseo redirigir al usuario a otra vista donde se muestra la entrada. A continuación se muestra el código para el formulario simple.
import React from 'react' import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import Second from '../view/second/Second'; const Form = () => { const navigate = useNavigate(); const [namn, setNamn] = useState(''); const [personNr, setPersonNr] = useState(''); const [datum, setDatum] = useState(''); const [planbok, setPlanbok] = useState(''); return ( <div> <form> <div> <input type="text" id="namnField" required value={namn} onChange={(n) => setNamn(n.target.value)} placeholder='Namn'></input> </div> <div> <input type="text" id="personNrField" required value={personNr} onChange={(pn) => setPersonNr(pn.target.value)} placeholder='Personnr'></input> </div> <div> <input type="text" id="datumField" required value={datum} onChange={(d) => setDatum(d.target.value)} placeholder='Datum'></input> </div> <div> <input type="text" id="planbokField" required value={planbok} onChange={(p)=>setPlanbok(p.target.value)} placeholder='Plånbokadress'></input> </div> <button type="submit" id="inputForm"onSubmit {navigate('/second')}>Enter</button> </form> </div> ) } export default FormY aquí está el componente que quiero mostrar en la entrada del formulario:
import React from 'react' import Form from '../../form/Form' const Second = ({namn, datum, personNr, planbok}) => { return ( <div> <p>{namn}, {datum}, {personNr}, {planbok}</p> </div> ) } export default SecondComo puede ver, he intentado usar accesorios, esto no funciona. Claro que puedo representar el componente llamado en el componente y puedo completarlo con la entrada del formulario. Pero esto no es lo que deseo lograr, quiero que las variables de la entrada del formulario se muestren cuando represente en una vista diferente.
¿Cómo lograría esto? ¿Debería usar Ajax, el gancho useContext? ¿Hay alguna otra manera que sea mejor para manejar este tipo de situación? Gracias de antemano por tu tiempo. Saludos / Svante.
Resuelto este problema con useContext. Usó los principios en este video de YouTube sobre el tema: https://www.youtube.com/watch?v=lhMKvyLRWo0&t=342s
Creo que podría ser una mejor práctica hacer lo que escribió MrPickles como respuesta a mi primera publicación.