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

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)  }