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

Question

我正在学习 React。我已经为你创建了一个sandbox。
在沙盒中，您将看到用于输入 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

因为@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>
  );
}

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

How save state of multiple input in react

reactjs

multiple-input