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

Question

У меня есть компонент, который я создал с помощью перехватчиков React, который имеет вход и флажок. Я добавил функцию к входу для проверки адреса электронной почты. У меня есть функция на флажок, который очищает ввод и отключает его. Я пытаюсь переписать свою функцию проверки, чтобы она выполнялась всякий раз, когда поле ввода активно, так что даже если пользователь щелкнет по флажку, чтобы очистить и отключить поле, а затем снова щелкнет по нему, чтобы включить его, проверка снова запустится и предложит Пользователь с сообщением об ошибке, чтобы ввести адрес электронной почты. На данный момент мой ввод настроен с помощью функции onBlur, которая запускает проверку, как только пользователь входит и выходит из ввода. Мне нужно сохранить эту функциональность, но дополнить ее, чтобы запускать всякий раз, когда вход включен. У меня есть песочница с кодом здесь для дальнейшего контекста и мой компонент в кратком формате ниже:

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { Col, Row, Input, Checkbox } from "antd";

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 = {} } = 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(e) {
    if (!disableInput) {
      clearInput();
    }
    setDisableInput(prevValue => !prevValue);
    setErrors({});
  }

  return (
    <Container>
      <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={8}>
          <Checkbox value={disableInput} onChange={CheckboxClick} /> EMAIL OPT
          OUT
        </Col>
      </Row>
    </Container>
  );
};

const Container = styled.div`
  text-align: left;
`;

const ErrorInput = ({ isError, ...remainingProps }) => (
  <Input {...remainingProps} />
);

ErrorInput.propTypes = {
  isError: PropTypes.bool
};

const StyledInput = styled(ErrorInput)`
  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

Вы можете сделать что-то вроде

function CheckboxClick(e) {
  const isDisabled = !disableInput;
  setDisableInput(isDisabled);

  if (isDisabled) {
    clearInput();
    setErrors({});
  } else {
    setErrors(validateEmail(inputValue));
  }
}

Итак, сначала вы обновляете состояние disabled, а затем выполняете действие в зависимости от него.