У меня есть форма (извините, она такая длинная), в которой пользователю очень просто ввести имя, адрес электронной почты, телефон и комментарии:
<form
className={classes.root}
data-testid="getting-started-form"
onSubmit={handleSubmit(onSubmit)}
>
<div style={{ width: '400px' }}>
<div style={{ width: '100%'}}>
<Controller as={<TextField
label="Name"
id="name"
name="name"
type="text"
value={name}
placeholder="Name"
onChange={(e: React.FormEvent<EventTarget>) => {
let target = e.target as HTMLInputElement;
setName(target.value);
}}
inputProps={{
'data-testid': 'name'
}}
/>} name="name" rules={{ required: true }} control={control}
/>
{errors.name && <span>Name is required</span>}
</div>
<div style={{ width: '100%' }}>
<Controller as={<TextField
label="Email"
id="email"
name="email"
type="text"
value={email}
placeholder="Email"
style={{ width: '100%' }}
onChange={(e: React.FormEvent<EventTarget>) => {
let target = e.target as HTMLInputElement;
setEmail(target.value);
}}
inputProps={{
'data-testid': 'email'
}}
/>} name="email" rules={{ required: true, pattern: /^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$/i }} control={control}
/>
{errors.email && <span>Email is required</span>}
</div>
<div style={{ width: '30%' }}>
<Controller as={<TextField
label="Phone"
id="phone"
name="phone"
type="text"
value={phone}
placeholder="eg.15556667890"
onChange={(e: React.FormEvent<EventTarget>) => {
let target = e.target as HTMLInputElement;
setPhone(target.value);
}}
inputProps={{
'data-testid': 'phone'
}}
/>} name="phone" rules={{ pattern: /\d{11}/ }} control={control}
/>
</div>
<div style={{ width: '30%' }}>
<Controller as={<TextField
label="Comments"
id="comments"
name="comments"
type="text"
value={comments}
placeholder="Comments"
rows={6}
multiline
onChange={(e: React.FormEvent<EventTarget>) => {
let target = e.target as HTMLInputElement;
setComments(target.value);
}}
inputProps={{
'data-testid': 'comments'
}}
/>} name="comments" control={control}
/>
</div>
</div>
<Button
type="submit"
aria-label="submit getting-started-form"
variant="contained"
color="primary"
data-testid="getting-started-form-submit-button"
>
Submit
</Button>
</form>
Все поля проверяются при отправке. Есть ли способ получить формы реакции-крючка для выполнения какой-либо проверки ДО того, как форма будет отправлена? Я бы хотел, чтобы такие флаги, как Angular, были грязными, первозданными и т. Д.
