使用react js为每一行创建动态复选框

Question

我在表单中有两个输入行，当单击add时，它将添加新行。从第二行开始，点击添加它应该添加复选框1来显示第二行依赖于第一行对于第三行它应该创建2个复选框说复选框1复选框2。当单击保存按钮时，应该保存它的行输入，并单击相应的复选框。

我能够为每一行创建动态复选框，但无法为每一行发送选定的复选框值。当我点击复选框时，e.target.value显示为1,2,3但它没有附加到"依赖的"作为"dependent"1、2、3,

https://codesandbox.io/s/practical-stallman-msr7n?file=/src/App.js

Answer 1

这是一个工作的codesandbox

<标题>

当你尝试像这样更新状态时:

let copyState = [...prevState]; // creates a shallow copy
copyState[index][key] = value;
if (value === "toggle")
copyState[index][key] = !copyState[index][key]; // mutates state, doesn't change

相反，您应该用一个新状态替换整个状态。导入lodash并调用copyState = lodash.deepCopy(prevState)将有所帮助。但我的建议是:

const onChangeFieldValue = (index, key, value) => {
setFormValues((prevState) =>
prevState.map((el, idx) => //Map function creates an entirely new array
idx === index
? value === "toggle"
? { ...el, [key]: !el[key] }
: { ...el, [key]: value }
: el
)
);
};

<标题>

片段

const { useState, Fragment } = React;
const App = () => {
const [formValues, setFormValues] = useState([
{ orderno: 1, inputValue1: "", inputValue2: "", checked: false }
]);
// control order number in a state to make sure
// that it does not get messed when you remove
// an indice from formValues
// !! default was 0. so set it to 1
const [orderNumber, setOrderNumber] = useState(1);
const addFormFields = () => {
setFormValues((prevState) => [
...prevState,
{
orderno: orderNumber + 1,
inputValue1: "",
inputValue2: "",
checked: false
}
]);
// increment order number
setOrderNumber((prev) => prev + 1);
};
const removeFormFields = (i) => {
let newFormValues = [...formValues];
newFormValues.splice(i, 1);
setFormValues(newFormValues);
// decrement order number
setOrderNumber((prev) => prev - 1);
};
const onChangeFieldValue = (index, key, value) => {
setFormValues((prevState) =>
prevState.map((el, idx) =>
idx === index
? value === "toggle"
? { ...el, [key]: !el[key] }
: { ...el, [key]: value }
: el
)
);
};
const saveFields = (e) => {
const queryparam = {
data: "xxx",
DbData: "xxx",
SQlData: "xxx", // only checked ones
overallData: { formValues }
};
console.log(queryparam, "hhhhhhh");
//axios.post('..',queryparam)
};
return <Fragment>
{formValues.length <= 4 ? formValues.map((element, index) => (
<div className="form-inline" key={index}>
<label>{index + 1}</label>
<input
type="text"
value={element.inputVal1}
onChange={(e) =>
onChangeFieldValue(index, "inputValue1", e.target.value)
}
/>
<input
type="text"
value={element.inputVal2}
onChange={(e) =>
onChangeFieldValue(index, "inputValue2", e.target.value)
}
/>
<input
type="checkbox"
checked={element.checked}
onChange={(e) => onChangeFieldValue(index, "checked", "toggle")}
/>
<button
className="button add"
type="button"
onClick={() => addFormFields()}>
Add
</button>
<button
type="button"
className="button remove"
onClick={() => removeFormFields(index)}>
Remove
</button>
</div>
))
: ""}
<button
type="button"
className="button remove"
onClick={(e) => saveFields(e)}>
Save
</button>
<button
type="button"
className="button remove">
cancel
</button>
</Fragment>
};
ReactDOM.render(<App />, document.getElementById('react'))

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>