0
66
ViewsEnviar información del formulario a otro componente
Diseñé una tarjeta flash y quiero cambiar el texto de la tarjeta cuando hago clic en el botón, pero no sé cómo enviar la información del formulario al componente de la aplicación para actualizar el estado. componente de la aplicación
function App() { const [flashCard, setFlashCard] = useState({ word: "test", persianEquivalent: "test", }); const setFlashCardHandler = (e) => { setFlashCard({ flashCard: e }); }; return ( <div className="container"> <Form setFlashCard={setFlashCardHandler} /> <FlashCard flashCard={flashCard} /> </div> ); } export default App;Componente de formulario:
function Form({ setFlashCard }) { const [valueEn, setValueEn] = useState(); const [valuePer, setValuePer] = useState(); const setValueHandlerEn = (e) => { setValueEn(e.target.value); }; const setValueHandlerPer = (e) => { setValuePer(e.target.value); }; const setFlashCardHandler = (e) => { e.preventDefault(); setFlashCard((e)=>{valueEn=e.target[0].value}); }; return ( <form onSubmit={setFlashCardHandler}> <input id="word-input" placeholder="world" value={valueEn} onChange={setValueHandlerEn} /> <input id="persian-equivalent-input" placeholder="Equivalent" value={valuePer} onChange={setValueHandlerPer} /> <button id="submit-btn">send</button> </form> ); } export default Form;
·
Juan Pablo Isaza
2 answers
Answer question0
Hay un problema con la forma de establecer los valores.
- Pase
setFlashCardcomo accesorio aForm
<Form setFlashCard={setFlashCard} />- En Formulario, cambie
setFlashCardHandlercomo se muestra a continuación.
const setFlashCardHandler = (e) => { e.preventDefault(); setFlashCard({ word: valueEn, persianEquivalent: valuePer }); };- Establezca una cadena vacía (
"") como estado predeterminado para evitar enviarundefined.
const [valueEn, setValueEn] = useState(""); const [valuePer, setValuePer] = useState(""); 
·
Juan Pablo Isaza
Report
0
Agregue nuevos accesorios updateFlashCard al componente.
Me gusta:
<Form updateFlashCard={(e) => setFlashCard(e)}/> Y cambie el valor en el estado updateFlashCard del componente de formulario
Me gusta:
function Form({ updateFlashCard }) { const [valueEn, setValueEn] = useState(); const [valuePer, setValuePer] = useState(); const setValueHandlerEn = (e) => { setValueEn(e.target.value); }; const setValueHandlerPer = (e) => { setValuePer(e.target.value); }; const setFlashCardHandler = (e) => { e.preventDefault(); updateFlashCard(e.target[0].value) // update from here }; return ( <form onSubmit={setFlashCardHandler}> <input id="word-input" placeholder="world" value={valueEn} onChange={setValueHandlerEn} /> <input id="persian-equivalent-input" placeholder="Equivalent" value={valuePer} onChange={setValueHandlerPer} /> <button id="submit-btn">send</button> </form> ); } export default Form;
·
Juan Pablo Isaza
Report
Answer question