如何使用反应钩子使用状态正确处理动态表单

Question

如何正确管理此特定UI表单的状态，用户可以在其中添加输入字段(添加输入按钮(和添加输入部分(添加部分按钮(。

我认为这将是我的初始状态，我可以将每个数组对象映射到输入部分，并将每个参数数组映射到输入数。

const [values, setValue] = useState([
{
params: ['1 input']
},
{
params: ['2 input','2 input']
}
])

我在理解如何向参数数组添加值时遇到问题，如何传递我的初始状态？

Answer 1

这样的东西应该可以工作：

import React, { useState } from "react";
export default function App() {
const [values, setValue] = useState([
{
params: ["1 input"]
},
{
params: ["2 input", "2 input"]
}
]);
const createInputHelper = index => {
const stateCopy = values;
stateCopy[index].params.concat(`{index + 1} input`);
setValue(stateCopy);
};
return (
<div className="App">
<div style={{ display: "flex", flexDirection: "column", width: "100px" }}>
{values.map((value, firstIndex) => {
return value.params.map((param, index) => {
return (
<input
value={param}
onClick={() => createInputHelper(firstIndex)}
/>
);
});
})}
</div>
</div>
);
}

Answer 2

基本上您正在更新某些事件的值，例如，单击按钮时 因此，您需要捕获该事件，当它触发时，您更新数据，然后使用setValues()

function handleOnClick(input){
const updatedValues = [...values];
updatedValues[0].params.push(input)
setValue(updatedValues);
}