如何在反应中保存多个输入的状态
How save state of multiple input in react
我正在学习 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]
。所以根据数组的长度,输入的个数会增加。
请帮助我。我被困在这里了!
你能将状态创建为数组吗?
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>
);
}
我正在学习 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]
。所以根据数组的长度,输入的个数会增加。
请帮助我。我被困在这里了!
你能将状态创建为数组吗?
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>
);
}