React功能组件中的电子邮件验证

Question

使用，我试图验证电子邮件地址。下面是我的密码。

问题是，当我尝试输入任何文本时，什么都不会发生，它不允许输入任何字母。

下面是我的组件代码，请帮助我

const UpdateEmailAddress: React.FC<Step> = (props: Step) => {
  const [customerEmail, setCustomerEmail] = useState<any>('');
  const [checkValidEmail, setcheckValidEmail] = useState<boolean | null>(null);
    
  const emailValidate = (value: any) => {
    if (!validEmailRegex(value)) {
      setcheckValidEmail(true);
    } else {
      setcheckValidEmail(false);
    }
  };

  const handleChange = (e: any) => {
    if (e.target.value) {
      setCustomerEmail(e.target.value);
    }
  };

  return (
    <>
      <div className="step container update-email-container pt-10" ref={props.domRef}>
        <div className="row">
          <div className="col-md-4">
            <div className="mb-4">
              <TextField
                aria-label={content.emailAddress.header}
                enableClearText
                errormessage={content.emailAddress.emailError}
                helptext={content.emailAddress.helptext}
                id="emailAddress"
                isValid={checkValidEmail}
                label={content.emailAddress.emailAddress}
                maxLength={0}
                name="emailAddress"
                tooltipText=""
                type="email"
                onChange={(e:any) => handleChange(e)}
                value={customerEmail}
              />
            </div>

            <ButtonAction
              onClick={emailValidate(customerEmail)}
              className="load-more-button mb-0"
              type="button"
              aria-label={content.emailAddress.nextButton}
            >
              {content.emailAddress.nextButton}
            </ButtonAction>
          </div>
        </div>
      </div>
    </>
  );
};

Answer 1

您在onChange方法中的逻辑是错误的--应该是

onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCustomerEmail(e.target.value)}

Answer 2

您必须定义onChange()方法。

应该是这样的

const handleChange = (e) => {
    setCustomerEmail(e.target.value);
  };

然后，您将能够输入textfield。

其次，您必须在emailvalidate()中传递onClick() of按钮中的值。

<ButtonAction onClick={()=>emailValidate(customerEmail)} className="load-more-button mb-0" type="button" aria-label={content.emailAddress.nextButton}>
              {content.emailAddress.nextButton}
            </ButtonAction>

并在emailValidate(value)中删除emailValidate(value)参数，因为它只使用value而不使用e。