Estoy tratando de crear un formulario React simple que, al hacer clic en el botón, mostrará el valor de entrada ingresado en un elemento de entrada controlado. Específicamente, NO quiero tener una solución idéntica a la de los documentos de React (actualizar constantemente el valor que se muestra en el cambio de entrada), sino que solo quiero que actualice el texto del párrafo que se muestra después de que el usuario haya presionado el botón Enviar. Puedo hacer esto con esta solución actual (representación condicional basada en el estado enviado que se establece en las funciones del controlador):
import { useState } from 'react'; export default function App() { const [text, setText] = useState(''); const [submitted, setSubmitted] = useState(false); const handleSubmit = e => { e.preventDefault(); setSubmitted(true); }; const handleChange = e => { setSubmitted(false); setText(e.target.value); }; return ( <> <form onSubmit={e => handleSubmit(e)}> <label>Text: </label> <input type="text" value={text} onChange={e => handleChange(e)} /> <button type="submit" onClick={handleSubmit}> Show </button> {submitted && <p>{text}</p>} </form> </> ); }Pero supongo que hay una manera mucho mejor de hacer esto.
Si desea poder enviar varias veces y conservar la última antes de volver a enviar, use esto:
import { useState } from 'react'; export default function App() { const [text, setText] = useState(''); const [displayText, setDisplayText] = useState(''); const handleSubmit = e => { e.preventDefault(); setDisplayText(text); }; const handleChange = e => { setText(e.target.value); }; return ( <> <form onSubmit={e => handleSubmit(e)}> <label>Text: </label> <input type="text" value={text} onChange={e => handleChange(e)} /> <button type="submit" onClick={handleSubmit}> Show </button> {displayText && <p>{displayText}</p>} </form> </> ); } displayText && ... es para que la etiqueta de párrafo no exista hasta que tenga un valor para mostrar, pero puede reemplazar esa sección sin eso y funcionará.