javascript - 使用 react 根据后端响应更新复选框值
问题描述
我正在尝试做一个编辑功能,我将从后端获取数据。因此,如果家属的值为“1,2”,则应选中复选框。如果需要,我应该能够取消选中该复选框并再次发送该值。在下面的一个中,当我们单击第二行的添加时,我正在检查复选框的值是否为 2(行:79)并且它显示为已选中。问题是当我无法取消选择它并再次发送时。
https://codesandbox.io/s/naughty-rhodes-i2sn9?file=/src/App.js
解决方案
我稍微更改了您的代码,
dependents
状态无法处理所有表单值的依赖项,因此我在表单值对象中添加了一个依赖对象,我已经对其进行了测试并且它正在工作,只有复选框的代码和逻辑被修改了所有其他代码和你的类似
https://codesandbox.io/s/react-fiddle-forked-ubcz4
尝试这个
import React, { useState } from "react";
const App = () => {
const [formValues, setFormValues] = useState([
{ orderno: 1, inputValue1: "", inputValue2: "", dependentParams: [] }
]);
const [dependents, setDependents] = useState("");
// 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 = () => {
let dependentString = [];
formValues.map((d, i) => {
dependentString.push(i + 1);
});
setFormValues((prevState) => [
...prevState,
{
orderno: orderNumber + 1,
inputValue1: "",
inputValue2: "",
dependentParams: dependentString.length ? dependentString : []
}
]);
// 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) => {
let copyState = [...prevState];
copyState[index][key] = value;
return copyState;
});
};
const onchangeCheckbox = (e, orderNo, index) => {
setFormValues((prevState) => {
let copyState = [...prevState];
let dependentParams = [...copyState[orderNo].dependentParams];
console.log(index, dependentParams);
if (dependentParams.indexOf(index) !== -1) {
dependentParams.splice(dependentParams.indexOf(index), 1);
} else {
dependentParams.push(index);
}
copyState[orderNo].dependentParams = dependentParams;
return copyState;
});
};
const saveFields = (e) => {
const queryparam = {
data: "xxx",
DbData: "xxx",
SQlData: "xxx", // only checked ones
overallData: { formValues : formValues.map(d => ({...d, dependentParams:d.dependentParams.join(',')})) }
};
console.log(queryparam, "hhhhhhh");
};
const rows = (ele, orderno) => {
let rowNos = [];
for (let i = 0; i < orderno; i++) {
rowNos.push(
<>
<input
type="checkbox"
value={orderno - i}
id={orderno - i}
checked={ele.dependentParams.indexOf(orderno - i) !== -1}
onChange={(e) => {
onchangeCheckbox(e, orderno, orderno - i);
}}
/>
Params {orderno - i}
</>
);
}
return rowNos;
};
return (
<>
{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)
}
/>
{rows(element, index)}
<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"
//onClick={(e) => cancelFields(e)}
>
cancel
</button>
</>
);
};
export default App;
推荐阅读
- javascript - 向下滚动功能
- python - 无法在 jupyter 实验室中导入 pymc3
- r - 工作空间中加载的包和对象的源代码引用 (srcref)
- vba - 我收到一个未知的文件路径错误,我不知道为什么?
- ruby-on-rails - 在 Windows 上运行 bundle install 时遇到问题
- unreal-engine4 - 警告 尝试移动完全模拟的骨架网格体 VehicleMesh。请使用传送标志。问题
- google-apps-script - 选择单元格(Ctrl+A)然后复制范围并粘贴到另一个工作表的第一个空行
- function - Haskell中地图功能的解释(使用foldr)?
- swift - 找到适合特定宽度的 NSFont 大小
- react-native - 世博会应用程序的本地更改会影响谷歌下载的应用程序,而无需在 google play 或应用商店中更新应用程序