反应/反应钩子:每当用户离开输入字段时，我都会尝试使用钩子触发验证

Question

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

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>

Answer 2

您可以在组件中使用onBlur，并在导入组件时将其与 props this.props.blur挂钩。您可以简单地使用blur

<styledInput blur={()=> this.validationFunction()}/>

现在，在幕后，React 知道将 onBlur 事件的功能转换为它映射到的道具。