reactjs - 如何在反应中保存多个输入的状态

Question

我正在学习反应。我为你创建了一个沙盒 。
在沙箱中，您将看到用于输入name、credit、的多个输入debit。
目前，如果我输入姓名，它将更新所有姓名输入，类似地用于贷记和借记输入。

我想要什么：
每当我们点击SAVE按钮时，我想获取数据：

credits: [
  {
    amount: 10,
    index: 0,
  },
  {
    amount: 12,
    index: 1,
  },
],
debits: [
  {
    amount: 5,
    index: 0,
  },
  {
    amount: 2,
    index: 1,
  },
],
};

注意： 在沙箱中，你会看到我定义了一个数组， const arr = [0, 1]. 所以根据数组的长度，输入的数量会增加。

请帮我。我被困在这里！

Answer 1

您可以将状态创建为数组吗？

  const [data, setData] = useState(Array(5).fill(null).map(() => ({
    name: "",
    credit: "",
    debit: ""
  })));

以后只更新这个数组中需要的项目？

Answer 2

As @Yoskutik gave me a hint. So I used that hint to solve my problem and I got my final solution :

import React, { useState, useEffect } from "react";
import "./styles.css";
//constants
const arr = [0, 1,2]; // may contain n elements
export default function App() {
  //states
  const [data, setData] = useState({
    credits: [
      ...Array(arr.length)
        .fill(null)
        .map((item) => ({
          index: "",
          name: "",
          amount: ""
        }))
    ],
    debits: [
      ...Array(arr.length)
        .fill(null)
        .map((item) => ({
          index: "",
          name: "",
          amount: ""
        }))
    ]
  });

  //functions
  const nameChangeHandler = (e, index) => {
    const oldData = { ...data };
    // oldData[index] = [...oldData, ]
    if (e.target.name === "credit") {
      oldData["credits"][index] = {
        ...oldData["credits"][index],
        amount: e.target.value,
        index
      };
    }
    if (e.target.name === "debit") {
      oldData["debits"][index] = {
        ...oldData["debits"][index],
        amount: e.target.value,
        index
      };
    }

    // setData((prevState) => ({
    //   ...prevState,
    //   [e.target.name]: e.target.value
    // }));
  };
  const formSubmitHandler = (e) => {
    e.preventDefault();
    //logging
    console.log(data);
  };

  return (
    <div className="App">
      <h2>Multiple input form</h2>
      <form onSubmit={formSubmitHandler}>
        <table>
          <tr>
            <th>Sr. no.</th>
            <th>Name</th>
            <th>Credit</th>
            <th>Debit</th>
          </tr>
          {/* mapping for muliple input */}
          {arr.map((item, index) => (
            <tr key={index}>
              <td>{index}</td>
              <td>
                <input
                  type="text"
                  name="name"
                  value={data.name}
                  onChange={(e) => nameChangeHandler(e, index)}
                />
              </td>
              <td>
                <input
                  type="number"
                  name="credit"
                  value={data.credit}
                  onChange={(e) => nameChangeHandler(e, index)}
                  className="amount"
                />
              </td>
              <td>
                <input
                  type="number"
                  name="debit"
                  value={data.debit}
                  onChange={(e) => nameChangeHandler(e, index)}
                  className="amount"
                />
              </td>
            </tr>
          ))}
        </table>
        <div className="center mt-10">
          <button className=" btn cursor-pointer">SAVE</button>
        </div>
      </form>
    </div>
  );
}