Javascript 对电子邮件进行输入验证，尝试清除错误消息，并在单击复选框时灰显输入

我使用带有输入字段的React钩子创建了一个组件，每当用户将字段留空或输入错误的格式时，该字段就会为电子邮件运行验证功能。我在输入旁边还有一个复选框，它具有一个功能，可以在用户单击输入字段时禁用该字段。我现在遇到的问题是，即使该字段被复选框禁用，与格式相关的错误消息仍会显示在下面。我试图清除错误消息，并在用户单击复选框时灰显输入字段。我在这里运行了一个codesandbox：下面是我的完整组件

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'

function validateEmail(value) {
  const errors = {}
  if (value === '') {
    errors.email = 'Email address is required'
  } else if (!/\S+@\S+\.\S+/.test(value)) {
    errors.email = 'Email address is invalid'
  }
  return errors
}

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

  function onBlur(e) {
    setErrors(validateEmail(e.target.value))
  }

  function clearInput() {
    setInputValue(' ')
  }

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

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


  return (
    <Container>
      <Row>
        <Col span={10}>
          <h4>
            PRIMARY CONTACT EMAIL &nbsp;
          </h4>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <StyledInput
            value={inputValue}
            onChange={handleInputChange}
            disabled={disableInput}
            onBlur={onBlur}
            isError={!!errors.email}
          />
          {errors.email && <ErrorDiv>{errors.email}</ErrorDiv>}
        </Col>
        <Col span={2} />
        <Col span={8}>
          <StyledCheckbox
            value={disableInput}
            onChange={CheckboxClick}
          /> EMAIL
          OPT OUT{' '}
        </Col>
      </Row>
    </Container>
  )
}



const Container = styled.div`
  text-align: left;
`
const StyledCheckbox = styled(Checkbox)`
  &&& {
    background: white;

    input + span {
      width: 35px;
      height: 35px;
      border: 2px solid ${({ theme }) => theme.colors.black};
    }

    input + span:after {
      width: 12.5px;
      height: 20px;
    }

    input:focus + span {
      width: 35px;
      height: 35px;
    }
  }
`

const StyledInput = styled(Input)`
  max-width: 100%;
  background: white;

  &&& {
    border: 2px solid ${props => (props.isError ? '#d11314' : 'black')};
    border-radius: 0px;
    height: 35px;
  }
`

const ErrorDiv = styled.div`
  color: #d11314;
`


export default CustomerDetails

从“React”导入React
从“道具类型”导入道具类型
从“样式化组件”导入样式化
进口{
列、行、图标、输入、工具提示
}来自“antd”
从“../elements/Checkbox”导入复选框
从“../core/Markup”导入标记
函数validateEmail（值）{
常量错误={}
如果（值==''）{
errors.email='需要电子邮件地址'
}否则如果（！/\S+@\S+\.\S+/.test（值））{
errors.email='电子邮件地址无效'
}
返回错误
}
const CustomerDetails=（{customer}）=>{
const{contact={}，account={}，site={}}=customer | |{}
常量[disableInput，setDisableInput]=React.useState（false）
const[errors，setErrors]=React.useState（{}）
常量[inputValue，setInputValue]=React.useState（contact.email）
函数onBlur（e）{
setErrors（validateEmail（e.target.value））
}
函数clearInput（）{
setInputValue（“”）
}
函数handleInputChange（事件）{
setInputValue（event.target.value）
}
函数CheckboxClick（）{
如果（！disableInput）{
clearInput（）
}
setDisableInput（prevValue=>！prevValue）
}
返回(
主要联系人电子邮件
{errors.email&&{errors.email}
电子邮件
选择退出{'}
)
}
const Container=styled.div`
文本对齐：左对齐；
`
const StyledCheckbox=styled（复选框）`
&&& {
背景：白色；
输入+跨度{
宽度：35px；
高度：35px；
边框：2px solid${（{theme}）=>theme.colors.black}；
}
输入+跨度：之后{
宽度：12.5px；
高度：20px；
}
输入：焦点+广度{
宽度：35px；
高度：35px；
}
}
`
const StyledInput=styled（输入）`
最大宽度：100%；
背景：白色；
&&& {
边框：2px实心${props=>（props.isError？'#d1314'：'black'）；
边界半径：0px；
高度：35px；
}
`
const ErrorDiv=styled.div`
颜色：#d11314；
`
导出默认客户详细信息

}

使用默认值更新错误状态以重置错误

---

如果有人再次单击复选框使输入字段再次激活，我需要再次运行验证或至少再次设置错误。有什么办法吗？

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