React.js：如果输入经过验证，如何提交表单？

Question

我有一个带有两个输入的基本form ： email和confirmEmail ，它会更新email地址并确认新的电子邮件地址是否输入正确。
到目前为止，验证工作也很好。
每当email与confirmEmail不匹配或其中一个输入为空时，它将引发错误。
但是，我想将所有这些验证都放在submit button上，以便验证工作并且仅在单击按钮后突出显示错误，并在输入值有效时更新registeredEmail状态。

这是代码片段和沙盒链接。

import React, { useState } from "react";

function Form() {
  const [registeredEmail, setRegisteredEmail] = useState("JohnDoe@gmail.com");

  const [input, setInput] = useState({
    email: "",
    confirmEmail: ""
  });

  const [error, setError] = useState({
    email: "",
    confirmEmail: ""
  });

  const onInputChange = (e) => {
    const { name, value } = e.target;
    setInput((prev) => ({
      ...prev,
      [name]: value
    }));
    validateInput(e);
  };

  const validateInput = (e) => {
    let { name, value } = e.target;
    setError((prev) => {
      const stateObj = { ...prev, [name]: "" };

      switch (name) {
        case "email":
          if (!value) {
            stateObj[name] = "Please enter Email";
          } else if (input.confirmEmail && value !== input.confirmEmail) {
            stateObj["confirmEmail"] =
              "Email and Confirm Email does not match.";
          } else {
            stateObj["confirmEmail"] = input.confirmEmail
              ? ""
              : error.confirmEmail;
          }
          break;

        case "confirmEmail":
          if (!value) {
            stateObj[name] = "Please enter Confirm Email.";
          } else if (input.email && value !== input.email) {
            stateObj[name] = "Email and Confirm Email does not match.";
          }
          break;

        default:
          break;
      }

      return stateObj;
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    validateInput(e);
    setRegisteredEmail(input.email);
  };

  return (
    <>
      <header>{registeredEmail}</header>
      <form
        style={{
          display: "flex",
          flexDirection: "column"
        }}
      >
        <input
          type="email"
          name="email"
          placeholder="address"
          onChange={onInputChange}
          value={input.email}
        />
        {error.email && <span style={{ color: "red" }}>{error.email}</span>}

        <input
          onChange={onInputChange}
          value={input.confirmEmail}
          type="email"
          name="confirmEmail"
          placeholder="repeat address"
        />
        {error.confirmEmail && (
          <span style={{ color: "red" }}>{error.confirmEmail}</span>
        )}
      </form>
      <button onClick={handleSubmit}>speichern</button>
    </>
  );
}

export default Form;

任何帮助将不胜感激

Answer 1

您当前让onInputChange处理程序运行validateInput ，然后设置错误。 您可能希望它仅在您的handleSubmit处理程序中运行validateInput ，并且仅使用onInputChange来处理击键时的状态更改，就像您当前所做的那样。

Answer 2

name是一个属性，需要获取函数 getAttribute(...) 。

尝试这个：

var name = e.target.getAttribute('name');

更新

这不起作用，因为真正的问题是您正在检查提交的按钮的事件。 所以你没有输入信息和值。 您应该检查输入状态并验证它们（在这里您可以设置错误）。 然后你可以返回一个布尔值来决定用户是否可以提交。

尝试这个：

    const validateInput = () => {
    if (input.email === "") {
      setError({ ...error, email: "Please enter Email" });
      return false;
    }
    if (input.email !== input.confirmEMail) {
      setError({
        ...error,
        confirmEmail: "Email and Confirm Email does not match."
      });
      return false;
    }

    // HERE YOU CAN ADD MORE VALIDATIONS LIKE ABOVE

    return true;
   };

   const handleSubmit = (e) => {
    e.preventDefault();
    const isValid = validateInput();
    if (isValid) {
      //SubmitFunc()
    }
   };