Soy un principiante en Typescript, pero me gusta pensar que sé lo que estoy haciendo cuando se trata de React. Este desafío de codificación requiere que construya un formulario de registro simple de varias páginas.
Mi enfoque es realizar un seguimiento del progreso en el estado de la aplicación y mostrar condicionalmente uno de los cinco componentes de "etapa de formulario" en función del progreso. Primero te pide tu nombre, luego el teléfono y luego el correo electrónico. No es como me gustan mis formularios, pero es lo que se requiere.
Actualmente estoy luchando para que funcione un controlador de cambios simple. Esta es mi interfaz Props para el componente, que debería aparecer cuando el progreso del usuario === 0.
interface Props { firstName: string; lastName: string; handleChange: (e: React.ChangeEvent<HTMLInputElement> | undefined) => void; }Así es como estoy viendo los campos de entrada.
const [first, setFirst] = useState<string>(""); const [last, setLast] = useState<string>(""); const inputRef = useRef<HTMLInputElement>(null);Finalmente, este es un campo de ejemplo:
<input ref={inputRef} id="firstName" type="text" value={last} onChange={handleChange} // Some function logic here ></input>Normalmente, construiría un campo de entrada como este (por ejemplo):
<textarea className="post-draft" name="post" onChange={(e) => { handleChange(e); }} rows={2} />Entonces tendría una función handleChange que usaba if(e.target.name === "post"), etc. para realizar diferentes cambios de estado.
¿Cómo puedo replicar este comportamiento en TS? En App.tsx, ¿qué debo poner dentro de las llaves para que se compile correctamente?
<FullName firstName="" lastName="" />handleChange también necesita entrar aquí, aparentemente. Estoy completamente a oscuras sobre cómo y por qué.
No sé si lo hice bien, pero ¿Necesita ayuda en HandleChange para InputBox y desea obtener todos los valores en InputBoxes después de hacer clic en un botón? ¿Está comprobando si el formulario es correcto y simplemente va a la página siguiente?
Si es el caso, puede usar useEffect on Change.
Ejemplo de código de aplicación completo:
import { useState } from "react"; function App() { const inputStyle = {float:"left",clear:"left",marginTop:"20px",height:"30px",width:"200px",fontSize:"18px",textAlign:"center"}; const buttonStyle = {float:"left",clear:"left",marginTop:"20px",height:"30px",width:"200px",fontSize:"18px",textAlign:"center",backgroundColor:"#005dc7",borderRadius:"5px",color:"white",border:"0px",cursor:"pointer"}; const containerStyle = {display:"block",alignItems:"center",width:"400px",margin:"0 auto"}; const [email,setEmail] = useState(""); const [name,setName] = useState(""); const [surname,setSurname] = useState(""); const onNext = (event) => { event.preventDefault(); //Prevent the normal "Form" handle if(email && name && surname) //if everything is set (not null and not empty) { console.log("email : "+email); console.log("name : "+name); console.log("surname : "+surname); console.log("ALL DONE! GO NEXT PAGE!"); } else { console.log("SOMETHING IS LEFT EMPTY!"); } } return ( <> <div style={containerStyle}> <h1>Register Form</h1> <form> <input style={inputStyle} type="text" placeholder="Your Email" onChange={(event) => {setEmail(event.target.value)}}/> <input style={inputStyle} type="text" placeholder="Your Name" onChange={(event) => {setName(event.target.value)}}/> <input style={inputStyle} type="text" placeholder="Your Surname" onChange={(event) => {setSurname(event.target.value)}}/> <input style={buttonStyle} type="button" value="Next" onClick={event => onNext(event)}></input> </form> </div> </> ); } export default App;¡Espero que sea correcto y que ayude!