如何获得反应中形式的值

Question

我试图以React中形式获取所有输入元素的值。 这是我

export default function MarkAttendance() {

  const dispatch = useDispatch();
  const navigate = useNavigate();

  const { users, loading, error } = useSelector((state) => state.userList);
  const today = new Date().toISOString().substr(0, 10);
  const { userInfo } = useSelector((state) => state.userLogin);
  const [firstTime, setFirstTime] = useState('')
  const [secondTime, setSecondTime] = useState('')
  const [attenandance, setAttendance] = useState({ id: null, date: today, first_time: "Present", second_time: "Present" });

  useEffect(() => {
    if (userInfo && userInfo.isAdmin) {
      dispatch(listUsers());

    } else {
      navigate("/login");
    }

  }, [dispatch, userInfo, navigate]);

  const handleSubmit = (e) => {
    e.preventDefault();


    for (let i = 0; i < users.length; i++) {
      setAttendance({ id: users[i].id, date: today, first_time: firstTime, second_time: secondTime });

      postAttendance(attenandance);

    }
  }

  return (
      <section>
        <div className="row">
          <div className="col-md-12 text-dark">
            <h3>Mark Attendance</h3> for <h4>{today}</h4>'s meal
          </div>
        </div>
        {loading ? (
          <Loader />
        ) : error ? (
          <Message variant="danger">{error}</Message>
        ) : (
          <form onSubmit={handleSubmit}>
            <table className="table table-bordered">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Room no.</th>
                  <th scope="col">First Time</th>
                  <th scope="col">Second Time</th>
                </tr>
              </thead>
              <tbody>

                {users.map((user) => (
                  <tr key={user.id}>


                    <th scope="row" name="userId">{user.id}</th>
                    <td className="form-group">
                      <input

                        type="text"
                        className="form-control"
                        id="table-name"
                        name="username"
                        value={user.username}

                      />
                    </td>
                    <td className="form-group">
                      <input
                        type="text"
                        className="form-control"
                        id="table-room"
                        name="room"
                        value={user.room}

                      />

                    </td>

                    <td>
                      <select name={`firstAttendance${user.id}`} onChange={(e) => (e.target.value)} className="form-control" id="table-first-time">
                        <option value="present">Present ✓</option>
                        <option value="absent">Absent X</option>
                        <option value="double">Double 2</option>
                      </select>

                    </td>
                    <td>
                      <select name={`secondAttendance${user.id}`} onChange={(e) => (e.target.value)} className="form-control" id="table-second-time">
                        <option value="present">Present ✓</option>
                        <option value="absent">Absent X</option>
                        <option value="double">Double 2</option>
                      </select>

                    </td>
                  </tr>
                ))}
              </tbody>
            </table>

            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </form>

        )}
      </section >
  );
}

想要的表单是获取选择值以及用户ID并将其发送回服务器。我不知道如何获取用户ID以及他在表格中选择了什么。它是由地图功能制成的，这意味着名称属性都是相同的。

我尝试的

1. 是尝试动态地更改name属性，但它仍然给我不确定。
2. 我尝试使用usestate挂钩，但它只给了我最后一个用户的价值，这也改变了其他用户的价值，因为所有挂钩只有一个挂钩。

因此，如何在ReactJ中以形式获取所有值。谢谢

Answer 1

因此，一段时间后，我终于使用了技巧来获取所有值。我所做的是通过将每个用户的用户-ID 单独的标签提供给每个id标签。 >标签ID。每个用户都有一个唯一的ID，因此输入和选择标签也是如此。然后提取所需输入的值first_time和second_time通过提供user-id，遍历每个输入，并为所有用户和所有用户获取单独的值通过postAttendance派遣它们。
它的外观是：

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      const attendanceExtractor = (e, id) => {
        let first_time = e.target.elements[`first-attendance-${id}`].value;
        let second_time = e.target.elements[`second-attendance-${id}`].value;

        return [first_time, second_time]
      }  // writing a separate function for extracting each value


// then looping through each 
      for (let index = 0; index < userIds.length; index++) {
        let id = userIds[index];

        const attendance = {
          student: id,
          date: date,
          first_time: attendanceExtractor(e, id)[0],
          second_time: attendanceExtractor(e, id)[1]
        }
        dispatch(postAttendance(attendance, id))
      }
      alert("All the attendance is submitted successfully")
      dispatch(getAttendance());
      let count = counter(getAttendanceObj, date);
      setTotal(count)

      console.log(count)
    } catch (error) {

    }
  }

形式看起来像这样：

  <form className="form" onSubmit={handleSubmit}>

              <table className="table table-bordered">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Room no.</th>
                    <th scope="col">First Time</th>
                    <th scope="col">Second Time</th>
                    <th scope="col">Status</th>
                  </tr>
                </thead>

                {users.map((user) => (


                  <tbody>




                    <tr key={user.id}>


                      <th scope="row" id={`user-id-${user.id}}`}>{user.id}</th>
                      <td className="form-group">
                        <input

                          type="text"
                          className="form-control"
                          id={`table-name-${user.id}`}
                          name="username"
                          value={user.username}

                        />
                      </td>
                      <td className="form-group">
                        <input
                          type="text"
                          className="form-control"
                          id={`table-ropm-${user.id}`}
                          name="room"
                          value={user.room}

                        />

                      </td>

                      <td>
                        <select id={`first-attendance-${user.id}`} onChange={(e) => (e.target.value)} className="form-control" >
                          <option value="present">Present ✓</option>
                          <option value="absent">Absent X</option>
                          <option value="double">Double 2</option>
                        </select>

                      </td>
                      <td>
                        <select id={`second-attendance-${user.id}`} onChange={(e) => (e.target.value)} className="form-control" > // FOCUS ON ID
                          <option value="present">Present ✓</option>
                          <option value="absent">Absent X</option>
                          <option value="double">Double 2</option>
                        </select>

                      </td>
                      <td>
                        <i class="bi bi-check" ></i>
                      </td>
                    </tr>

                  </tbody>
                ))
                }

              </table>
              <button type="submit" className="btn btn-primary">
                Submit
              </button>

            </form>