Question

我使用React JS进行了电子邮件验证输入，如果我没有输入有效的电子邮件地址，该输入将自动显示错误。

这是我的验证功能：

export const validate = e => {
  let error = [true, ''];
  if (e.validation.email){
    const valid = /\S+@\S+\.\S+/.test(e.value);
    const message = `${!valid ? 'Must be a valid Email' : ''}`;
    error = !valid ? [valid,message]: error;
  }
  if (e.validation.required) {
    const valid   = e.value.trim() !== '';
    const message = `${!valid ? 'This field is Required' : ''}`;
    error = !valid ? [valid,message]: error
  }
  return error
};

所有此验证均从另一个文件引用到此状态：

state = {
    formError  : false,
    formSuccess: '',
    formdata   : {
      email: {
        element          : 'input',
        value            : '',
        config           : {
          name       : 'email_input',
          type       : 'email',
          placeholder: 'Enter your Email'
        },
        validation       : {
          required: true,
          email   : true
        },
        valid            : false,
        validationMessage: ''
      }
    }
  };

所有验证错误消息都将放在showError()函数上，而我已经在formFields.js上输入了。这是formFields.js文件：

import React from 'react';

const FormField = ({formdata, id, change}) => {

  const showError = () => {
    let errorMessage = <div className="error_label">
      {
        formdata.validation && !formdata.valid ?
          formdata.validationMessage
          : null
      }
    </div>
    console.log(errorMessage);
    return errorMessage;
  };

  const renderTemplate = () => {
    let formTemplate = null;
    switch (formdata.element) {
      case('input'):
        formTemplate = (
          <div>
            <input
              {...formdata.config}
              value={formdata.value}
              onChange={event => change({event, id})}
            />
            {showError()}
          </div>
        );
        break;
      default:
        formTemplate = null;
    }
    return formTemplate;
  };

  return (
    <div>
      {renderTemplate()}
    </div>
  );
};

export default FormField;

我已经深入研究并对我写的每个变量和数据以及从React Tab进行console.log()处理。

输入错误的电子邮件时：

当我清空字段时：

当我输入有效的电子邮件时：

验证错误消息已在该状态下更新，但是当我在console.log(errorMessage)函数上showError()时，它返回的结果是这样的，这可能是主要问题：

我从console.log到errorMessage的期望是一个带有错误消息的div标记。但是我只有一堆对象数据。

我输入了什么代码错误？我错过了代码中的某些内容吗？

Answer 1

从屏幕快照中，您将错误消息放在formdata.email.message中，但是formdata.email.validationMessage始终为空，在showError中您仅使用了validationMessage，这就是为什么您看到空消息。

const showError = () => {
    let errorMessage = <div className="error_label">
      {
        formdata.validation && !formdata.valid ?
          formdata.validationMessage /*This is always empty*/
          : null
      }
    </div>
    console.log(errorMessage);
    return errorMessage;
  };

ReactJS：可以，但是没有返回任何东西

1 个答案: