javascript - react / react Hook : I am trying to trigger a validation using hooks whenever a user leaves input field

Question

我有一个使用 react Hook 设计的组件，并连接了更改功能，以便输入字段预先填充客户电子邮件地址，如果用户单击电子邮件选择退出复选框，它将清除并禁用输入。我现在尝试设计一个更改事件，当用户输入新的电子邮件地址并离开输入字段时，该事件将触发电子邮件验证以确保其格式正确。我已经使用正则表达式编写了一个函数，其中包含我想要显示的错误消息，但我不确定如何使用现在的主要组件来实现它。我在下面包含了验证函数以及主要组件。我对钩子(Hook)相当陌生，因此事实证明，尝试了解如何实现所有这些逻辑有点困难，因此任何有关如何实现这一点的建议/代码示例都将是一个巨大的帮助

Function for Email Validation

export default function validate(values) {
  let errors = {};
  if (!values.email) {
    errors.email = 'Email address is required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Email address is invalid';
  }
  return errors;
};

Main Component

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'

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

  function clearInput() {
    setInputValue(' ')
  }

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

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


  return (
    <Container>
      <h2>{account.name}</h2>
      <Row>
        <Col span={8}>
          <H3>
            <strong>Primary Contact:</strong>
          </H3>
          <P>{contact.name}</P>
          <P>{contact.phone}</P>
        </Col>
        <Col span={8}>
          <H3>
            <strong>Service Address:</strong>
          </H3>
          <P>{site.address1}</P>
          <P>{site.address2}</P>
          <P>
            {site.city},&nbsp;{site.state}&nbsp;
            {site.postalCode}
          </P>
        </Col>
        <Col span={8}>
          <H3>
            <strong>Billing Address:</strong>
          </H3>
          <StyledMarkup>{account.billingStreet}</StyledMarkup>
          <P>
            {account.billingCity},&nbsp;{account.billingState}
            &nbsp;
            {account.billingPostalCode}
          </P>
        </Col>
      </Row>
      <br />
      <Row>
        <Col span={10}>
          <h4>
            PRIMARY CONTACT EMAIL &nbsp;
            <Tooltip
              placement="right"
              title={primaryContact}
            >
              <StyledTooltipIcon
                type="question-circle"
                theme="filled"
              />
            </Tooltip>
          </h4>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <StyledInput
            value={inputValue}
            onChange={handleInputChange}
            disabled={disableInput}
          />
        </Col>
        <Col span={2} />
        <Col span={8}>
          <StyledCheckbox
            value={disableInput}
            onChange={CheckboxClick}
          /> EMAIL
          OPT OUT{' '}
        </Col>
      </Row>
      <br />
    </Container>
  )
}

CustomerDetails.propTypes = {
  customer: PropTypes.object
}

CustomerDetails.defaultProps = {
  customer: {}
}

export default CustomerDetails

Answer 1

以下是您可以执行的操作:

看看这是否适合您。

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

function App() {
  const [inputValue, setInputValue] = React.useState('');
  const [errors, setErrors] = React.useState({});
  
  function onChange(e) {
    setInputValue(e.target.value);
  }
  
  function onBlur(e) {
    setErrors(validateEmail(e.target.value));
  }
  
  return(
    <div>
      <div>Fill the email input and click elsewhere to blur the field</div>
      <input onChange={onChange} onBlur={onBlur} value={inputValue} placeholder="Enter email..."/>
      {errors.email && <div>{errors.email}</div>}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>