reactjs - 使用 UseState 提交 ReactJS 表单

Question

所以我设法为我的反应应用程序制作了一个 html 表单。问题是我无法在控制台上输出记录表单上的输入。它只是向我展示了这个： 控制台日志输出图片

这是我的代码片段：

import { useState } from "react";

const InputForm = (props) => {
  const [inputData, setInputData] = useState(
    {
      enteredFName: "",
      enteredLName: "",
      enteredEmail: "",
      enteredEid: "",
      enteredBirthday: "",
    },
    []
  );

  //First Name Validation
  const [enteredFName, setEnteredFName] = useState("");
  const [enteredFNameTouch, setEnteredFNameTouch] = useState(false);

  const enteredFNameFilled = enteredFName.trim() !== "";
  const enteredFNameNotFilled = !enteredFNameFilled && enteredFNameTouch;

  const enteredFNameValid = /^[A-Za-z\s]+$/.test(enteredFName);
  const enteredFNameInvalid = !enteredFNameValid && enteredFNameNotFilled;

  const fNameChangeHandler = (event) => {
    setEnteredFName(event.target.value);
  };

  const fNameBlurHandler = () => {
    setEnteredFNameTouch(true);
  };

  //Last Name Validation
  const [enteredLName, setEnteredLName] = useState("");
  const [enteredLNameTouch, setEnteredLNameTouch] = useState(false);

  const enteredLNameFilled = enteredLName.trim() !== "";
  const enteredLNameNotFilled = !enteredFNameFilled && enteredLNameTouch;

  const enteredLNameValid = /^[A-Za-z\s]+$/.test(enteredLName);
  const enteredLNameInvalid = !enteredLNameValid && enteredLNameNotFilled;

  const lNameChangeHandler = (event) => {
    setEnteredLName(event.target.value);
  };

  const lNameBlurHandler = () => {
    setEnteredLNameTouch(true);
  };

  //EmailValidation
  const [enteredEmail, setEnteredEmail] = useState("");
  const [enteredEmailTouch, setEnteredEmailTouch] = useState(false);

  const enteredEmailFilled = enteredEmail.trim() !== "";
  const enteredEmailNotFilled = !enteredEmailFilled && enteredEmailTouch;

  const enteredEmailValid = enteredEmail.includes("@");
  const enteredEmailInvalid = !enteredEmailValid && enteredEmailNotFilled;

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const emailBlurHandler = () => {
    setEnteredEmailTouch(true);
  };

  //EIDValidation
  const [enteredEid, setEnteredEid] = useState("");
  const [enteredEidTouch, setEnteredEidTouch] = useState(false);

  const enteredEidFilled = enteredEid.trim() !== "";
  const enteredEidNotFilled = !enteredEidFilled && enteredEidTouch;

  const eidChangeHandler = (event) => {
    setEnteredEid(event.target.value);
  };

  const eidBlurHandler = () => {
    setEnteredEidTouch(true);
  };

  //Birthday Validation
  const [enteredBirthday, setEnteredBirthday] = useState("");
  const [enteredBirthdayTouch, setEnteredBirthdayTouch] = useState(false);

  const enteredBirthdayFilled = enteredBirthday.trim() !== "";
  const enteredBirthdayNotFilled =
    !enteredBirthdayFilled && enteredBirthdayTouch;

  const birthdayChangeHandler = (event) => {
    setEnteredBirthday(event.target.value);
  };

  const birthdayBlurHandler = () => {
    setEnteredBirthdayTouch(true);
  };

  let formValid = false;
  if (
    enteredFNameFilled &&
    enteredLNameFilled &&
    enteredEmailFilled &&
    enteredEidFilled &&
    enteredBirthdayFilled
  ) {
    formValid = true;
  }

  const formSubmitHandler = (event) => {
    event.preventDefault();

    if (!enteredFNameValid || !enteredLNameValid) {
      alert("First Name and Last Name accepts letters only.");
      return;
    }

    console.log(inputData);

    setEnteredFName("");
    setEnteredFNameTouch(false);
    setEnteredLName("");
    setEnteredLNameTouch(false);
    setEnteredEmail("");
    setEnteredEmailTouch(false);
    setEnteredEid("");
    setEnteredEidTouch(false);
    setEnteredBirthday("");
    setEnteredBirthdayTouch(false);
  };

  return (
    <form onSubmit={formSubmitHandler}>
      <div>
        <h1>Please Enter your details below</h1>
      </div>
      <div className="control-group">
        <div>
          <label>First Name</label>
          <input
            type="text"
            required
            id="fName"
            onChange={fNameChangeHandler}
            onBlur={fNameBlurHandler}
            value={enteredFName}
          />
          {enteredFNameInvalid && <p>First Name is required.</p>}
        </div>
        <div>
          <label>Last Name</label>
          <input
            type="text"
            required
            id="lName"
            onChange={lNameChangeHandler}
            onBlur={lNameBlurHandler}
            value={enteredLName}
          />
          {enteredLNameInvalid && <p>Last Name is required.</p>}
        </div>
      </div>
      <div>
        <label>Email</label>
        <input
          type="email"
          required
          id="email"
          onChange={emailChangeHandler}
          onBlur={emailBlurHandler}
          value={enteredEmail}
        />
        {enteredEmailInvalid && <p>Email is required.</p>}
      </div>
      <div>
        <label>EID</label>
        <input
          type="number"
          required
          min="1"
          step="1"
          id="eid"
          onChange={eidChangeHandler}
          onBlur={eidBlurHandler}
          value={enteredEid}
        />
        {enteredEidNotFilled && <p>EID is required.</p>}
      </div>
      <div>
        <label>Birthday</label>
        <input
          type="date"
          required
          id="birthday"
          onChange={birthdayChangeHandler}
          onBlur={birthdayBlurHandler}
          value={enteredBirthday}
        />
        {enteredBirthdayNotFilled && <p>Birthday is required.</p>}
      </div>
      <div>
        <button type="submit" disabled={!formValid}>
          Submit
        </button>
      </div>
    </form>
  );
};

export default InputForm;

如何使用 setInputData 进行整体表单提交？因为我不知道在哪里把它放在代码上。

标签： reactjsreact-hooks

Answer 1

首先，如果您的 react 项目中有多种形式，请尝试使用自己的 hook 或使用 react form hook 或 formik 以使其更容易和更低的代码，最好从 Form 获取对象并像这样传递它：

setInputData(data)

如果不可能，请在 setInputData 中设置每个属性，如果您有很多状态，请尝试为每个项目编写动态处理函数而不是函数，如下所示：

function handle(type,value){
  useState(prev => {
   ...prev,
   [type]:value
 })
}