Tengo un campo de texto para ingresar un título en un cuadro de diálogo modal. Hay un botón llamado 'crear' que, cuando se hace clic, agrega un elemento a una tabla Y cierra el cuadro de diálogo modal.
<Button onClick={createProjectButtonHandler} variant="contained">Y la función que maneja esto es:
const createProjectButtonHandler = () => { props.onSaveProjectData(projectData); props.onCloseModal(); setProjectTitle(""); };Aquí está mi función y estado de validación de título:
// title validation state and handler const [titleError, setTitleError] = useState(false); const validateTitle = (title) => { return title === 0 ? setTitleError(true) : setTitleError(false); };Aquí mi campo de entrada:
<TextField label="Title" variant="outlined" required onChange={projectTitleHandler} error={titleError} helperText={titleError && "Please enter a title"} ></TextField> ¿Cómo agrego esta función de validación a la función createProjectButtonHandler para que estos dos: props.onSaveProjectData(projectData); props.onCloseModal(); solo ocurre cuando titleError es falso; de lo contrario, al hacer clic en el botón y titleError es verdadero, quiero mostrar ese error.
En resumen, quiero validar el texto de entrada DESPUÉS de hacer clic en el botón. Si no hay errores, continúe.
import { useForm} from "react-hook-form"; const { register, handleSubmit, errors} = useForm(); const submitForm = (data) => { props.onSaveProjectData(data); props.onCloseModal(); setProjectTitle(""); } <form onSubmit={handleSubmit(submitForm)}> <Grid item> <TextField name="Title" label="title" type={"text" } ref={register({ required: true })} error={!!errors.Title} helperText="Please enter a title" /> </Grid> <Grid item> <Button type="submit"> submit </Button> </Grid> </form>