reactjs - 验证消息未显示使用简单反应验证器的反应挂钩

问题描述

我正在尝试验证表单，验证似乎正在工作，因为我无法显示消息，在控制台中显示消息属性在验证工作时为真，但它未在 UI 中显示，我尝试了不同的方法，我是新的bie，只是想学习反应的基础知识。所以我现在被困在显示验证错误上。检查我的以下代码

import React, { useState, useRef } from "react";
import Header from "./Layouts/Header";
import Footer from "./Layouts/Footer";
import { PROJECT_NAME } from "./Config";
import SimpleReactValidator from "simple-react-validator";

const ContactUs = () => {
  document.title = PROJECT_NAME + " Contact Us";
  const [formData, SetFormData] = useState({
    cname: "",
    cemail: "",
    cmessage: "",
  });

  const [state, setState] = useState({
    cname: "",
  });

  const { cname, cemail, cmessage } = formData;

  const handleChange = (e) => {
    SetFormData({ ...formData, [e.target.name]: e.target.value });
    setState({
      cname: e.target.value,
    });
    //console.log(e.target);
  };

  const validator = new SimpleReactValidator({
    className: "text-danger",
    messages: {
      cname: "That is not an email.",
    },
    validators: {
      cname: {
        message: "The :attribute must be a valid IP address.",
      },
    },
  });

  const onSubmit = (e) => {
    e.preventDefault();
    const contactUsData = {
      cname: formData.cname,
      cmessage: formData.cmessage,
      cemail: formData.cemail,
    };
    console.log(validator);
    console.log(contactUsData);
    if (validator.allValid()) {
      alert("You submitted the form and stuff!");
    } else {
      validator.showMessages();
    }
  };

  return (
    <div>
      <Header />
      <div className="container" style={{ marginTop: "30px" }}>
        <div className="row">
          <h2>Contact US</h2>
          <div className="container">
            <form onSubmit={(e) => onSubmit(e)}>
              <div className="form-group">
                <label htmlFor="pwd">Name:</label>
                <input
                  type="text"
                  className="form-control"
                  id="pwd"
                  placeholder="Enter Name"
                  value={formData.cname}
                  name="cname"
                  onChange={handleChange}
                />
                {validator.message("cname", formData.cname, "required|alpha")}
              </div>
              <div className="form-group">
                <label htmlFor="email">Email:</label>
                <input
                  type="email"
                  className="form-control"
                  id="email"
                  placeholder="Enter email"
                  value={cemail}
                  name="cemail"
                  onChange={(e) => handleChange(e)}
                />
              </div>
              <div className="form-group">
                <label htmlFor="message">Message:</label>
                <textarea
                  className="form-control"
                  id="message"
                  placeholder="Enter Message"
                  value={cmessage}
                  name="cmessage"
                  onChange={(e) => handleChange(e)}
                ></textarea>
              </div>
              <button type="submit" className="btn btn-primary">
                Submit
              </button>
            </form>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};
export default ContactUs;

标签： reactjsvalidationreact-hooks

reactjs - 验证消息未显示使用简单反应验证器的反应挂钩

问题描述

解决方案

推荐阅读