如何从动态创建的输入字段中获取数据

Question

我试图捕获动态创建的输入字段的输入，我只能获得第一组运动字段(锻炼，操练，集合)。

import { useState } from "react";
export default StackTest;

function StackTest() {
  const [formData, setFormData] = useState({
    title: "",
    date: "",
    exercises: [{ Exercise: "benchpress", Reps: "5", Sets: "5" }],
  });

  const handle = (e, type, index) => {
    setFormData({
      title: formData.title,
      date: formData.date,
      exercises: [
        {
          Exercise: type === "E" ? e : formData.exercises[index].Exercise,
          Reps: type === "R" ? e : formData.exercises[index].Reps,
          Sets: type === "S" ? e : formData.exercises[index].Sets,
        },
      ],
    });
  };

  const updateForm = (e) => {
    setFormData((currentFormData) => ({
      ...currentFormData,
      [e.target.name]: e.target.value,
    }));
  };

  const handleAddExercise = (e) => {
    e.preventDefault();
    setFormData((currentFormData) => {
      return {
        ...currentFormData,
        exercises: [
          ...currentFormData.exercises,
          { Exercise: "benchpress", Reps: "5", Sets: "5" },
        ],
      };
    });
  };

  return (
    <>
      <form action="">
        <label htmlFor="">title</label>
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={updateForm}
        />
        <label htmlFor="">date</label>
        <input
          type="text"
          name="date"
          value={formData.date}
          onChange={updateForm}
        />

        {formData.exercises.map((exercise, index) => {
          return (
            <div key={index}>
              <input
                placeholder="exercise"
                onChange={(e) => handle(e.target.value, "E", index)}
              />

              <input
                placeholder="reps"
                onChange={(e) => handle(e.target.value, "R", index)}
              />
              <input
                placeholder="sets"
                onChange={(e) => handle(e.target.value, "S", index)}
              />
              <button onClick={handleAddExercise}>Add Exercise</button>
            </div>
          );
        })}
      </form>
    </>
  );
}

每当我输入一个添加的练习字段时，它就会在第一个字符之后删除它。我还试图在handle函数中添加一个if语句来检查索引是否相同，但是由于我刚开始反应和编码，所以我可能实现了错误。

Answer 1

问题是，当您需要创建练习数组的副本并对其进行修改时，您正在覆盖练习数组的内容。

最简单的解决方案是创建练习数组的副本，进行所需的任何突变，然后更新状态。

import { useState } from "react";
export default StackTest;

function StackTest() {
  const [formData, setFormData] = useState({
    title: "",
    date: "",
    exercises: [{ Exercise: "benchpress", Reps: "5", Sets: "5" }],
  });

  const handle = (e, type, index) => {

    let localExer = [ ...formData.exercises ];
    localExer[index].Exercise = (type === "E" ? e : formData.exercises[index].Exercise)
    localExer[index].Reps = (type === "R" ? e : formData.exercises[index].Reps)
    localExer[index].Sets = (type === "S" ? e : formData.exercises[index].Sets)

    setFormData({
      title: formData.title,
      date: formData.date,
      exercises: [ ...localExer],
    });

  };

  const updateForm = (e) => {
    setFormData((currentFormData) => ({
      ...currentFormData,
      [e.target.name]: e.target.value,
    }));
  };

  const handleAddExercise = (e) => {
    e.preventDefault();
    setFormData((currentFormData) => {
      return {
        ...currentFormData,
        exercises: [
          ...currentFormData.exercises,
          { Exercise: "benchpress", Reps: "5", Sets: "5" },
        ],
      };
    });
  };

  return (
    <>
      <form action="">
        <label htmlFor="">title</label>
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={updateForm}
        />
        <label htmlFor="">date</label>
        <input
          type="text"
          name="date"
          value={formData.date}
          onChange={updateForm}
        />

        {formData.exercises.map((exercise, index) => {
          return (
            <div key={index}>
              <input
                placeholder="exercise"
                onChange={(e) => handle(e.target.value, "E", index)}
              />

              <input
                placeholder="reps"
                onChange={(e) => handle(e.target.value, "R", index)}
              />
              <input
                placeholder="sets"
                onChange={(e) => handle(e.target.value, "S", index)}
              />
              <button onClick={handleAddExercise}>Add Exercise</button>
            </div>
          );
        })}
      </form>
    </>
  );
}