Question

我有一个React应用程序，其中有一个包含电子邮件和电话号码字段的表单。 textBoxes在onBlur上进行自我验证。当我遇到电子邮件错误并出现在屏幕上时，当我对其进行修复然后单击“提交”按钮时，onBlur会触发并清除错误，但不会触发提交。我希望清除该错误并在此之后触发提交，因为单击了提交按钮

function SaveContactInfo () {
  const dispatch = useDispatch()
  const { email, phoneNumber } = useSelector(getContactInfo)
  const [emailValue, setEmail] = useInput(email)
  const [phone, setPhone] = useInput(phoneNumber)
  const [emailError, setEmailError] = useState(null)
  const [phoneError, setPhoneError] = useState(null)

  const handlePhoneOnBlur = useCallback((target) => {
    if (target.value) {
      let number = phoneUtil.parse(target.value, 'US')
      let valid = phoneUtil.isValidNumber(number)
      if (!valid) {
        if (!phoneError) {
          setPhoneError(true)
          target.focus()
        }
      } else {
        setPhoneError(false)
      }
    } else {
      setPhoneError(false)
    }
  }, [setPhoneError, phoneUtil, phoneError])

  const handleEmailOnBlur = useCallback((target) => {
    if (target.value) {
      if (!target.checkValidity()) {
        if (!emailError) {
          setEmailError(true)
          target.focus()
        }
      } else {
        setEmailError(false)
      }
    } else {
      setEmailError(false)
    }
  }, [setEmailError, emailError])

  const handleSaveContactInfo = useCallback((e) => {
    if (!emailError && !phoneError) {
      dispatch(updateContactInfo(phone, emailValue))
    }
  }, [dispatch, emailValue, phone, phoneUtil, emailError, phoneError])

  return (
    <form className={classes.preferences} noValidate onSubmit={handleSaveContactInfo}>
      <FormControl fullWidth className={classes.preference}>
        <EmailInfo />
        <TextInputField value={emailValue || ''} error={emailError} FormHelperTextProps={{ 'data-testid': 'emailError' }} helperText={emailError && 'Enter email address in format: yourname@example.com' variant='outlined' type='email' maxLength={100} onChange={setEmail} onBlur={handleEmailOnBlur} label='Email' />
      </FormControl>
      <FormControl fullWidth className={classes.preference}>
        <PhoneInfo />
        <TextInputField value={phone || ''} error={phoneError} helperText={phoneError && 'Enter phone number with area code and in format: 123-456-7890' variant='outlined' type='tel' onChange={setPhone} onBlur={handlePhoneOnBlur} label='Phone Number' />
      </FormControl>
      <div>
        <PrimaryButton type='submit'>Submit</PrimaryButton>
      </div>
    </form>
  )
}

export default SaveContactInfo

更新：我发现存在一个已知的反应问题https://github.com/facebook/react/issues/4210，其中当onBlur导致DOM重新呈现时，onBlur导致了提交按钮的位置发生偏移时，该点击未注册，因此失败。实际上，所有移动位置的按钮均未注册。有什么解决办法吗？

单击“提交按钮”时不会触发onSubmit，因为已触发onBlur

0 个答案: