Javascript React/React钩子：每当用户离开输入字段时，我都试图使用钩子触发验证

我有一个组件，我使用react钩子设计，带有在线更改功能，以便输入字段预先填充客户电子邮件地址，如果用户单击电子邮件选择退出复选框，它将清除并禁用输入。我现在正在尝试设计一个更改事件，当用户输入新的电子邮件地址并离开输入字段时，该事件将触发电子邮件验证，以确保其格式正确。我已经用regex编写了一个函数，其中包含我想要显示的错误消息，但我不确定如何用我的主组件实现它。我在下面介绍了验证功能以及我的主要组件。我对hooks还相当陌生，因此，试图了解如何实现所有这些逻辑已经被证明有点困难，因此任何关于如何实现这些逻辑的建议/代码示例都将是一个巨大的帮助

Function for Email Validation

从“React”导入React
从“道具类型”导入道具类型
从“样式化组件”导入样式化
进口{
列、行、图标、输入、工具提示
}来自“antd”
从“../elements/Checkbox”导入复选框
从“../core/Markup”导入标记
const CustomerDetails=（{customer}）=>{
const{contact={}，account={}，site={}}=customer | |{}
常量[disableInput，setDisableInput]=React.useState（false）
常量[inputValue，setInputValue]=React.useState（contact.email）
函数clearInput（）{
setInputValue（“”）
}
函数handleInputChange（事件）{
setInputValue（event.target.value）
}
函数CheckboxClick（）{
如果（！disableInput）{
clearInput（）
}
setDisableInput（prevValue=>！prevValue）
}
返回(
{account.name}
主要联系人：
 {contact.name}
 {contact.phone}
服务地址：
 {site.address1}
 {site.address2}

{site.city}，{site.state}
{site.postalCode}

账单地址：
{account.billingStreet}

{account.billingCity}，{account.billingState}
{account.billingPostalCode}



主要联系人电子邮件
电子邮件
选择退出{'}


)
}
CustomerDetails.propTypes={
客户：PropTypes.object
}
CustomerDetails.defaultProps={
客户：{}
}
导出默认客户详细信息

如果导入组件，现在可以在组件中使用

onBlur

，并将其与props

this.props.blur连接起来。您只需使用
blur

<styledInput blur={()=> this.validationFunction()}/>

this.validationFunction（）}/>

现在，在幕后，react知道如何将onBlur事件的功能投射到它所映射到的道具上。
下面是如何做到的：

看看这对你是否有效


函数validateEmail（值）{
让错误={}；
如果（值==''）{
errors.email='需要电子邮件地址'；
}否则如果（！/\S+@\S+\.\S+/.test（值））{
errors.email='电子邮件地址无效'；
}
返回错误；
};
函数App（）{
常量[inputValue，setInputValue]=React.useState（“”）；
const[errors，setErrors]=React.useState（{}）；
函数onChange（e）{
设置输入值（如目标值）；
}
函数onBlur（e）{
setErrors（validateEmail（e.target.value））；
}
返回(
填写电子邮件输入，然后单击其他位置以模糊该字段
{errors.email&&{errors.email}
);
}
ReactDOM.render（，document.getElementById（'root'））

我修改了您的验证函数，使我的示例更简单。但是你可以根据你的需要来调整。这是可行的，但是现在我的禁用功能并没有使输入变灰，它仍然会为下面的无效电子邮件闪烁一条错误消息。关于如何绕过此问题，使输入仍然变灰，并且在禁用时不会显示错误消息，您有什么想法吗？如果可以，请转到，创建一个React沙盒，添加所需的依赖项，并尝试以最少的功能构建问题的示例。Yeup刚刚在此处创建了一个示例：。由于某些原因，定位是关闭的，所以我正在努力纠正这一点，但所有当前的行为都是相同的！这是现在的工作，但现在我有一个问题，我需要验证运行，并抛出错误消息，如果用户再次点击复选框。你知道怎么做吗？我基本上需要在以下两种状态之间切换：如果输入处于活动状态且字段为空或电子邮件格式错误，则抛出错误；如果有人单击复选框，则禁用输入/清除字段。如果他们再次单击复选框，输入字段将再次处于活动状态且为空，因此我需要再次显示错误消息。
Main Component

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import {
  Col, Row, Icon, Input, Tooltip
} from 'antd'
import Checkbox from '../elements/Checkbox'
import Markup from '../core/Markup'

const CustomerDetails = ({ customer }) => {
  const { contact = {}, account = {}, site = {} } = customer || {}
  const [disableInput, setDisableInput] = React.useState(false)
  const [inputValue, setInputValue] = React.useState(contact.email)

  function clearInput() {
    setInputValue(' ')
  }

  function handleInputChange(event) {
    setInputValue(event.target.value)
  }

  function CheckboxClick() {
    if (!disableInput) {
      clearInput()
    }
    setDisableInput(prevValue => !prevValue)
  }


  return (
    <Container>
      <h2>{account.name}</h2>
      <Row>
        <Col span={8}>
          <H3>
            <strong>Primary Contact:</strong>
          </H3>
          <P>{contact.name}</P>
          <P>{contact.phone}</P>
        </Col>
        <Col span={8}>
          <H3>
            <strong>Service Address:</strong>
          </H3>
          <P>{site.address1}</P>
          <P>{site.address2}</P>
          <P>
            {site.city},&nbsp;{site.state}&nbsp;
            {site.postalCode}
          </P>
        </Col>
        <Col span={8}>
          <H3>
            <strong>Billing Address:</strong>
          </H3>
          <StyledMarkup>{account.billingStreet}</StyledMarkup>
          <P>
            {account.billingCity},&nbsp;{account.billingState}
            &nbsp;
            {account.billingPostalCode}
          </P>
        </Col>
      </Row>
      <br />
      <Row>
        <Col span={10}>
          <h4>
            PRIMARY CONTACT EMAIL &nbsp;
            <Tooltip
              placement="right"
              title={primaryContact}
            >
              <StyledTooltipIcon
                type="question-circle"
                theme="filled"
              />
            </Tooltip>
          </h4>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <StyledInput
            value={inputValue}
            onChange={handleInputChange}
            disabled={disableInput}
          />
        </Col>
        <Col span={2} />
        <Col span={8}>
          <StyledCheckbox
            value={disableInput}
            onChange={CheckboxClick}
          /> EMAIL
          OPT OUT{' '}
        </Col>
      </Row>
      <br />
    </Container>
  )
}

CustomerDetails.propTypes = {
  customer: PropTypes.object
}

CustomerDetails.defaultProps = {
  customer: {}
}

export default CustomerDetails


<styledInput blur={()=> this.validationFunction()}/>