javascript - 动态添加和删除输入并更新嵌套数组
问题描述
当用户单击加号时,如何将新的输入字段动态添加到反应 js 中的嵌套数组中的对象?动态添加和删除输入
我想在下面分享的 handlepropositionTimeAddClick 和 handlepropositionTimeRemoveClick 方法中动态添加和删除 PropositionTimes。我怎样才能做到这一点?我想对 PropositionResponseTimes 和分析器做同样的事情。
const [issue, setIssue] = useState({
firstResponseDuration: "",
firstResponseOvertime: "",
solutionDuration: "",
solutionOvertime: "",
propositionTimes: [{
propositionTime: ""
}],
propositionResponseTimes: [{ propositionResponseTime: "" }],
analyzers: [{ analyzerName: "", analyzerHuaweiId: "" }],
});
const { firstResponseDuration, firstResponseOvertime,solutionDuration, solutionOvertime, propositionTimes, propositionResponseTimes, analyzers } = issue;
.
.
.
// handle click event of the Remove button
const handlepropositionTimeRemoveClick = index => {
};
// handle click event of the Add button
const handlepropositionTimeAddClick = (i) => {
};
.
.
.
{
issue.propositionTimes.map((item, i) => {
return (
<div key={i} className="form-group" >
<label>
Proposition Time
</label>
<TextField
type="datetime-local"
placeholder="Enter propositionTime"
name="propositionTime"
format="dd-MM-yyyy HH:mm"
value={item.propositionTime}
onChange={e => onInputPropositionTimes(e, i)}
/>
<div>
{issue.propositionTimes.length !== 1 && <button
className="mr10"
onClick={() => handlepropositionTimeRemoveClick(i)}>Remove</button>}
{issue.propositionTimes.length - 1 === i && <button onClick={handlepropositionTimeAddClick(i)}>Add</button>}
</div>
</div>
)
})
}
解决方案
// handle click event of the Remove button
const handlepropositionTimeRemoveClick = index => {
const issueObj = {...issue};
const filteredIssue = issue.propositionTimes.filter((item, ind) => ind !== index);
issueObj.propositionTimes = filteredIssue;
setIssue(issueObj);
};
// handle click event of the Add button
const handlepropositionTimeAddClick = (i) => {
const issueObj = {...issue};
const newObj = {
propositionTime: "" // Code to add new propositionTime
}
issueObj.propositionTimes.push(newObj)
setIssue(issueObj);
};
同样在你的handlepropositionTimeAddClick
函数中,不要直接调用它。只需通过参考
{issue.propositionTimes.length - 1 === i && <button onClick={() => handlepropositionTimeAddClick(i)}>Add</button>}
推荐阅读
- python-3.x - 使用python从pcap文件中读取802.11数据包
- prolog - 序言中的哈希集和队列
- python - 为什么每次我尝试设置变量时 Pyzo 都会抛出错误?
- c++ - 不确定我的排序算法有什么问题
- javascript - 使用 CryptoJS 方法对对象进行数字签名?
- android - ReyclerView 项目列表中项目之间的巨大差距
- javascript - 将数据从网站发送到 C# Forms 应用程序
- python - 在文件开头使用 os.chdir(os.path.dirname(__file__)) 是一个好习惯吗?
- xcode - 是什么让 Xcode Command-Click(代码索引)停止工作?
- c++ - 为什么我们可以创建一个模板类结构,其参数数量与声明结构时指定的参数不同?