我无法在ReactJs中重置复选框状态

Question

我有一个带有多个复选框的表单，我在提交第一个用户时重置了复选框输入的值。但提交另一个用户后，第二个用户的复选框值发生更改或变为空。我正在寻找解决方案，以使复选框值成为我在每次提交时检查的值。

import React from "react";
import { useState } from "react";
import "./Form.css";

const Form = () => {
const [enteredUsername, setEnteredUsername] = useState("");
const [enteredPassword, setEnteredPassword] = useState("");
const [enteredCpassword, setEnteredCpassword] = useState("");
const [enteredCheckbox, setEnteredCheckbox] = useState([]);
const [enteredEmail, setEnteredEmail] = useState("");

const usernameChangeHandler = (event) => {
  setEnteredUsername(event.target.value);
};
const passwordChangeHandler = (event) => {
  setEnteredPassword(event.target.value);
};
const cpasswordChangeHandler = (event) => {
  setEnteredCpassword(event.target.value);
};
const emailChangeHandler = (event) => {
  setEnteredEmail(event.target.value);
};

const checkboxHandler = (event) => {
  const item = event.target.name;

if (event.target.checked) {
  setEnteredCheckbox([...enteredCheckbox, item]);
} else {
  setEnteredCheckbox(
    enteredCheckbox.filter((val) => val.target.name !== item)
  );
}
console.log(enteredCheckbox);
};


//OnSubmitting form

const submitHandler = async (event) => {
 event.preventDefault();

const userData = {
  username: enteredUsername,
  password: enteredPassword,
  cpassword: enteredCpassword,
  email: enteredEmail,
  skills: enteredCheckbox.toString(),
 };

const response = await fetch("/register", {
  method: "POST",
  body: JSON.stringify(userData),
  headers: {
    "Content-Type": "application/json",
  },
});
const data = await response.json();
console.log(data);
resetHandler();
};

// For input reset

const resetHandler = () => {
setEnteredUsername("");
setEnteredPassword("");
setEnteredCpassword("");
setEnteredEmail("");
setEnteredCheckbox([]);
document.getElementById("userform").reset();
};



// Here is my form


return (
<main>
  <header>
    <h1>Sample Test Project</h1>
  </header>
  <div className="form-container">
    <form id="userform" onSubmit={submitHandler}>
      <table style={{ margin: "auto" }}>
        <tbody>
          <tr>
            <td colspan="3" height="50">
              <b>Add Details</b>
            </td>
          </tr>
          <tr>
            <td align="right">
              <label htmlFor="username">User Name*</label>
            </td>
            <td width="8%">:</td>
            <td align="left">
              <input
                id="username"
                type="text"
                value={enteredUsername}
                onChange={usernameChangeHandler}
                required
              />
            </td>
          </tr>
          <tr>
            <td align="right">
              <label htmlFor="password">Password*</label>
            </td>
            <td>:</td>
            <td align="left">
              <input
                id="password"
                type="password"
                value={enteredPassword}
                onChange={passwordChangeHandler}
                required
              />
            </td>
          </tr>
          <tr>
            <td align="right">
              <label htmlFor="cpassword">Confirm Password*</label>
            </td>
            <td>:</td>
            <td align="left">
              <input
                id="cpassword"
                type="password"
                value={enteredCpassword}
                onChange={cpasswordChangeHandler}
                required
              />
            </td>
          </tr>
          <tr>
            <td align="right">
              <label htmlFor="email">Email Address*</label>
            </td>
            <td>:</td>
            <td align="left">
              <input
                id="email"
                type="email"
                value={enteredEmail}
                onChange={emailChangeHandler}
                required
              />
            </td>
          </tr>
          <tr>
            <td align="right">
              <label htmlFor="image">Profile Image*</label>
            </td>
            <td>:</td>
            <td align="left">
              <input id="image" type="file" />
            </td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td align="left">(Jpeg,Jpg,Png,Max Limit:2MB)</td>
          </tr>
        </tbody>
      </table>
      <table id="footer">
        <tbody>
          <tr id="header">
            <td colSpan="2" align="left">
              (Please select minimum 3)
            </td>
          </tr>

          <tr>
            <td width="1%" align="left">
              <input
                id="c"
                type="checkbox"
                name="c"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="c">C</label>
            </td>
            <td width="1%" align="left">
              <input
                id="c++"
                type="checkbox"
                name="c++"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="c++"> C++</label>
            </td>
            <td width="1%" align="left">
              <input
                id="vb5"
                type="checkbox"
                name="vb5"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="vb5"> VB 5</label>
            </td>
            <td width="1%" align="left">
              <input
                id="vb6"
                type="checkbox"
                name="vb6"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="vb6"> VB 6</label>
            </td>
          </tr>
          <tr>
            <td width="1%" align="left">
              <input
                id="vs.net"
                type="checkbox"
                name="vs.net"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="vs.net">Visual Studio.net</label>
            </td>
            <td width="1%" align="left">
              <input
                id="asp"
                type="checkbox"
                name="asp"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="asp">ASP</label>
            </td>
            <td width="1%" align="left">
              <input
                id="asp.net"
                type="checkbox"
                name="asp.net"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="asp.net">ASP.Net</label>
            </td>
            <td width="1%" align="left">
              <input
                id="c#"
                type="checkbox"
                name="c#"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="c#"> C#</label>
            </td>
          </tr>
          <tr>
            <td width="1%" align="left">
              <input
                id="oracle"
                type="checkbox"
                name="oracle"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="oracle"> Oracle</label>
            </td>
            <td width="1%" align="left">
              <input
                id="php"
                type="checkbox"
                name="php"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="php"> PHP</label>
            </td>
            <td width="1%" align="left">
              <input
                id="java"
                type="checkbox"
                name="java"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="java">Java</label>
            </td>
            <td width="1%" align="left">
              <input
                id="sql"
                type="checkbox"
                name="sql"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="sql"> SQL Server</label>
            </td>
          </tr>
          <tr>
            <td width="1%" align="left">
              <input
                id="mysql"
                type="checkbox"
                name="mysql"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="mysql"> MySQL</label>
            </td>
            <td width="1%" align="left">
              <input
                id="sybase"
                type="checkbox"
                name="sybase"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="sybase">Sybase</label>
            </td>
            <td width="1%" align="left">
              <input
                id="jsp"
                type="checkbox"
                name="jsp"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="jsp"> JSP</label>
            </td>
            <td width="1%" align="left">
              <input
                id="perl"
                type="checkbox"
                name="perl"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="perl"> PERL</label>
            </td>
          </tr>
          <tr>
            <td width="1%" align="left">
              <input
                id="python"
                type="checkbox"
                name="python"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="python"> Python</label>
            </td>
            <td width="1%" align="left">
              <input
                id="coldfusion"
                type="checkbox"
                name="coldfusion"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="coldfusion"> Cold Fusion</label>
            </td>
            <td width="1%" align="left">
              <input
                id="windows"
                type="checkbox"
                name="windows"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="windows">Windows</label>
            </td>
            <td width="1%" align="left">
              <input
                id="linux"
                type="checkbox"
                name="linux"
                onChange={checkboxHandler}
              />
            </td>
            <td width="5%" align="left">
              <label htmlFor="linux"> Linux</label>
            </td>
          </tr>
        </tbody>
        <tr id="button">
          <td colSpan="4" align="right">
            <input type="submit" value="Submit" />
          </td>
          <td colSpan="4" align="left">
            <input type="reset" value="Reset" onClick={resetHandler} />
          </td>
        </tr>
      </table>
    </form>
  </div>
</main>
);
};


export default Form;

我的相同输入的集合如下所示：

1)

{"_id":{"$oid":"62d5a951ea47b8f4926e57cd"},"username":"asd","password":"asd","email":"[email protected]","skills":"vb5,asp.net,java,jsp,windows"}

{"_id":{"$oid":"62d5a529ea47b8f4926e57cb"},"username":"asd","password":"asd","email":"[email protected]","skills":""}

Answer 1

如果您在表单提交后在 React 中重置复选框值时遇到问题，那么正确管理复选框的状态至关重要。这是确保复选框在每次表单提交后保留其选中状态的解决方案：

问题分析： 复选框会丢失其选中状态，因为 ResetHandler 函数仅重置输入字段，而不会显式重置复选框状态。

解决方案： 为了确保复选框在每次表单提交后保持其选中状态，您应该更新您的 ResetHandler 函数以显式重置复选框状态：

const resetHandler = () => {
  setEnteredUsername("");
  setEnteredPassword("");
  setEnteredCpassword("");
  setEnteredEmail("");
  setEnteredCheckbox([]); // Reset the checkbox state explicitly
};