React / React Hooks: необходимо активировать проверку для ввода, когда пользователь снимает флажок

Question

У меня есть компонент с полем ввода и флажок. В таком виде флажок отключает поле ввода и очищает все ошибки проверки. То, что я пытаюсь сделать, - это создать дополнительную функциональность, которая, если кто-то снимает этот флажок и ввод снова становится активным, запускается проверка и еще раз предлагает пользователю ввести адрес электронной почты. У меня есть песочница с кодом здесь , например, и мой полный компонент указан ниже

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)
    setError({})
  }


  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 ErrorInput = ({ isError, ...remainingProps }) => (
  <Input {...remainingProps} />
)

ErrorInput.propTypes = {
  isError: PropTypes.bool
}

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

Answer 1

Есть несколько проблем с вашим кодом:

1. Зачем проверять ввод только на onBlur
2. Почему у флажка есть побочный эффект для очистки вывода?Добавьте для него кнопку.
3. Слишком много кода ловушки для кипения.

Вот минимальный пример, вам следует выяснить, что вам подходит:

const CustomerDetails = () => {
  const [email, setEmail] = useState('');
  const [disabled, setDisabled] = useState(false);
  const [isValid, setIsValid] = useState(false);
  const [showMsg, setShowMsg] = useState(true);

  return (
    <div className="App">
      Insert "hello"
      <Row>
        <Input
          value={email}
          onChange={e => {
            setEmail(e.target.value);
            setIsValid(isValidEmail(e.target.value));
          }}
          disabled={disabled}
        />
      </Row>
      <Row>{!isValid && showMsg && 'Email is invalid'}</Row>
      <Row type="flex" justify="space-between">
        <Col>
          <Checkbox
            value={!disabled}
            onChange={() => {
              setDisabled(prev => !prev);
              setShowMsg(prev => !prev);
              setIsValid(isValidEmail(''));
              setEmail('');
            }}
          />{' '}
          EMAIL OPT OUT
        </Col>
      </Row>
    </div>
  );
};

Демонстрация, которая подтверждает слово hello: