输入带有电子邮件验证的输入，尝试清除错误消息并在单击复选框时使输入变灰

Question

我使用带有输入字段的 React 钩子创建了一个组件，每当用户将该字段留空或输入不正确的格式时，该组件都会运行电子邮件验证功能。我在输入旁边还有一个复选框，带有一个功能，可以在用户单击时禁用输入字段。我现在遇到的问题是，即使该字段被复选框禁用，与格式相关的错误消息仍然显示在下方。每当用户单击复选框时，我都会尝试清除错误消息并将输入字段灰显。我在这里运行了一个代码沙盒：https ://codesandbox.io/s/friendly-breeze-2ly5h和下面的完整组件

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)

  }