Estoy trabajando en un código que toma las entradas de dos cuadros de texto, uno que toma un valor de cadena y otro que toma un valor numérico, y en tiempo real lo escribe en un párrafo sin un botón de envío. Tengo problemas para encontrar información sobre este proceso sin enviar nada. El párrafo solo debe mostrar . Para empezar, esto es lo que tengo:
import './App.css'; function App() { return ( <div> <form> <div>String:</div> <input type="text" strng = "strng" /><br/><br/> <div>Number:</div> <input type="text" strng = "number"/><br/><br/> <button>Clear</button> <p> Inputs: </p> </form> </div> ) } export default App;¿Alguien podría ayudarme a escribir los dos cuadros de texto del párrafo en tiempo real? Muchas gracias de antemano.
Debería poder vincular un useState con el evento onChange de la entrada
import './App.css'; import { useState } from "react"; function App() { const [text, setText] = useState(""); return ( <div> <form> <div>String:</div> <input type="text" strng="strng" onChange={(e) => setText(e.target.value)} /> <br /> <br /> <div>Number:</div> <input type="text" strng="number" /> <br /> <br /> <button>Clear</button> <p>Input: {text}</p> </form> </div> ); }