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

How save state of multiple input in react

我正在学习 React。我已经为你创建了一个sandbox
在沙盒中,您将看到用于输入 namecreditdebit.
的多个输入 目前,如果我输入姓名,它将以类似的方式更新贷方和借方输入的所有姓名输入。

我想要什么:
每当我们点击 SAVE 按钮时,我想获取数据为:

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

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

请帮助我。我被困在这里了!

你能将状态创建为数组吗?

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

然后仅更新此数组中需要的项目?

因为@Yoskutik给了我一个提示。所以我用那个提示来解决我的问题,我得到了我的最终解决方案:

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>
  );
}