Tengo dos campos y un botón. Quiero representar los valores de entrada con el clic de un botón. ¿Pueden por favor decirme cómo hacerlo?
function Home() { const [name, setName] = useState('') const [age, setAge] = useState(0) const submitForm = () => { console.log(name, age) } return ( <div> <div> <label htmlFor="name">Name:</label> <input type="text" value={name} onChange={e => setName(e.target.value)} /> </div> <div> <label htmlFor="age">age:</label> <input type="number" value={age} onChange={e => setAge(e.target.value)} /> </div> <button onClick={submitForm}>Submit</button> <h1>render "name" gere</h1> <h2>render "age" gere</h> </div> ) } export default HomePuede agregar un estado para rastrear el estado de visualización, como
const [visible, setVisible] = useState(false)Modifíquelo en el formulario de envío como:
const submitForm = () => { setVisible(true) }Y renderizarlo como:
{visible && <><h1>render {name} gere</h1> <h2>render {age} gere</h2> </>}Pruebe esto y vea si ayuda.
function Home() { const {register, handleSubmit} = useForm() const onSubmit = (data) => { console.log(data) } return ( <form onSubmit = {handleSubmit(onSubmit)}> <div> <div> <label htmlFor="name">Name:</label> <input type="text" value={name} onChange={e => setName(e.target.value)} /> </div> <div> <label htmlFor="age">age:</label> <input type="number" value={age} onChange={e => setAge(e.target.value)} /> </div> <button onSubmit={submitForm}>Submit</button> <h1>render "name" gere</h1> <h2>render "age" gere</h> </div> <form/> ); }Lo arreglo así.
function Home() { const [name, setName] = useState('') const [age, setAge] = useState(0) const [data, setData] = useState({}) const submitForm = () => { setData({name, age}) } return ( <div> <div> <label htmlFor="name">Name:</label> <input type="text" value={name} onChange={e => setName(e.target.value)} /> </div> <div> <label htmlFor="age">age:</label> <input type="number" value={age} onChange={e => setAge(e.target.value)} /> </div> <button onClick={submitForm}>Submit</button> <h1>{data.name}</h1> <h2>{data.age}</h2> </div> ) } export default Home