React/React 挂钩：我正在尝试在用户离开输入字段时使用挂钩触发验证

Question

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

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

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

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

现在在幕后，React 知道将 onBlur 事件的功能投射到它映射到的 prop。

Answer 2

以下是您的操作方法：

看看是否适合你。

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>

React/React 挂钩：我正在尝试在用户离开输入字段时使用挂钩触发验证

React/React Hooks: I am trying to trigger a validation using hooks whenever a user leaves input field

javascript

reactjs

react-hooks