I'm a beginner to Typescript, but I like to think I know what I'm doing when it comes to React. This coding challenge requires me to construct a simple multi-page registration form.
My approach is to keep track of progress in the App state, and conditionally display one of five "form stage" components based on the progress. First it asks your name, then phone, then email. It's not how I like my forms, but it's what is required.
Currently I am struggling to get a simple changeHandler to work. This is my Props interface for the component, which should appear when user progress === 0.
interface Props {
firstName: string;
lastName: string;
handleChange: (e: React.ChangeEvent<HTMLInputElement> | undefined) => void;
}
This is how I am watching for the input fields
const [first, setFirst] = useState<string>("");
const [last, setLast] = useState<string>("");
const inputRef = useRef<HTMLInputElement>(null);
Finally, this is an example field:
<input
ref={inputRef}
id="firstName"
type="text"
value={last}
onChange={handleChange} // Some function logic here
></input>
Normally, I would construct an input field like this (for example):
<textarea
className="post-draft"
name="post"
onChange={(e) => {
handleChange(e);
}}
rows={2}
/>
I would then have a handleChange function that used if(e.target.name === "post") etc. to perform different changes of state.
How can I replicate this behaviour in TS? In App.tsx, what do I need to put inside the braces, in order for it to properly compile?
<FullName firstName="" lastName="" />
handleChange also needs to go in here, apparently. I'm just completely in the dark on how and why.
I don't know if I got it right but You need help on HandleChange for the InputBox and you want to get all the values in InputBoxes after a button click? Like you are checking if the form is right and you just go for the next Page?
If it is the case you can use the useEffect on Change.
Complete App Code example :
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;
Hope it's right and it helps!