Untitled
unknown
plain_text
2 years ago
2.1 kB
4
Indexable
import { useEffect, useRef, useState } from "react"; const SimpleInput = (props) => { const nameInputRef = useRef(); const [enteredName, setEnteredName] = useState(""); const [enteredNameIsValid, setEnteredNameIsValid] = useState(false); const [enteredNameTouched, setEnteredNameTouched] = useState(false); useEffect(() => { if (enteredNameIsValid) { console.log("Name Input is valid!"); } }, [enteredNameIsValid]); const nameInputChangeHandler = (event) => { setEnteredName(event.target.value); if (event.target.value.trim() !== "") { setEnteredNameIsValid(true); return; } }; const formSubmissionHandler = (event) => { event.preventDefault(); setEnteredNameTouched(true); if (enteredName.trim() === "") { setEnteredNameIsValid(false); return; } setEnteredNameIsValid(true); console.log(enteredName); const enteredValue = nameInputRef.current.value; console.log(enteredValue); // nameInputRef.current.value = ''; => NOT IDEAL, DON'T MANIPULATE THE DOM setEnteredName(""); }; const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched; const nameInputClasses = nameInputIsInvalid ? "form-control invalid" : "form-control"; const onBlurHandler = (event) => { setEnteredNameTouched(true); if (enteredName.trim() === "") { setEnteredNameIsValid(false); return; } }; return ( <form onSubmit={formSubmissionHandler}> <div className={nameInputClasses}> <label htmlFor="name">Your Name</label> <input ref={nameInputRef} type="text" id="name" onChange={nameInputChangeHandler} value={enteredName} onBlur={onBlurHandler} /> {nameInputIsInvalid && ( <p className="error-text">Name must not be empty.</p> )} </div> <div className="form-actions"> <button>Submit</button> </div> </form> ); }; export default SimpleInput;
Editor is loading...