Как проверить форму ReactJS с react-input-mask

Рейтинг: 0Ответов: 2Опубликовано: 28.02.2023

У меня есть форма проверки, которая использует inputMask. mask="+7 999 999 99 99", я создал кнопку согласия, которая должна отображаться только тогда, когда поле ввода номера телефона полностью заполнено. Сейчас это работает так: я ввожу 1 цифру, и кнопка становится активной, но сделать ее активной нужно только после того, как номер телефона будет введен полностью. Как мне это сделать?

Я пыталась написать length < 10, но это работает, только если убрать строку mask="+7 999 999 99 99". Я возилась с этим вечер, пожалуйста, помогите

]

 import InputMask from "react-input-mask";
import React, {useState} from "react";

 
 const [client_mobile, setClientMobile] = useState("")

 const [formValid, setFormValid] = useState(false); 

        const phoneIsValid = client_mobile; 
        const isCredintialsValid = phoneIsValid;
        if(isCredintialsValid !== formValid)
        setFormValid(isCredintialsValid); 
    

return(
    <div className="element">
    <InputMask
     mask="+7 999 999 99 99" 
    value={client_mobile} onChange={event => change(setClientMobile, event, "Mp")}>
        <TextField className="input fio" label="phone" variant="outlined" autoComplete="off" error={mpError} helperText={mpHelperText} />
    </InputMask>

<div className="El_Consert">
<Button type="submit" 
disabled={client_mobile.length < 10}

// disabled={!formValid}  //does not work

variant="contained" color="primary" size="large">agreement</Button>
</div>

</div>
)
javascript reactjs input
Источник: Stack Overflow на русском

Ответы

▲ 0

Попробуйте использовать useeffect. Надеюсь поможет фрагмент из моего кода:

const [formValid, setFormValid] = useState(false)

 useEffect(() => {
    if (emailError) {
      setFormValid(false)
    } else {
      setFormValid(true)
    }
  })

<Input disabled={!formValid} type="submit" value="Войти" />
▲ 0

Если я правильно понимаю их код, то надо вместо onChange использовать beforeMaskedStateChange.