如何解决JSReact,删除除最后一项之外的任何动态添加的表单内容会擦除表单
我正在构建一个包含动态添加字段的表单,并且正在研究在用户改变主意时删除字段的功能。删除添加的最后一项时,它按预期工作,但如果我有,例如,3 个动态添加的字段并删除第二个,它会暂时工作,然后将整个表单擦干净。有谁知道为什么会发生这种情况?
Codesandbox link here,但我包括(我认为是)以下所有相关代码:
来自“form.js”:
import React,{ useState } from "react";
import CreditInputs from "./CreditInputs";
...
// Create an array that is all current credits except the one being deleted,set credit state to reflect new list
const handleDeleteCredit = (e) => {
const updatedCredits = [...creditState];
updatedCredits.splice(parseInt(e.target.dataset.idx),1)
setCreditState(updatedCredits);
}
return (
<form>
<label htmlFor="title">Title</label>
<input type="text" name="title" id="title" value={productionState.title} onChange={handleProductionChange} />
<label htmlFor="production_note">Production Note</label>
<input type="textarea" name="production_note" id="production_note" value={productionState.production_note} onChange={handleProductionChange} />
{
creditState.map((val,idx) => (
<CreditInputs
key={`credit-${idx}`}
idx={idx}
creditState={creditState}
handleCreditChange={handleCreditChange}
// Pass each credit the handleDeleteCredit function
handleDeleteCredit={handleDeleteCredit}
/>
))
}
<input type="button" value="Add New Credit" onClick={addCredit}/>
<input type="submit" value="Submit" />
</form>
)
}
export default Form;
来自“CreditInputs.js”:
import React from "react";
import PropTypes from "prop-types";
// Take in the handleDeleteCredit function
const CreditInputs = ({
idx,creditState,handleCreditChange,handleDeleteCredit
}) => {
const creditId = `name-${idx}`;
const roleId = `role-${idx}`;
const bioId = `bio-${idx}`;
return (
<div key={`credit-${idx}`}>
<label htmlFor={creditId}>{`Credit #${idx + 1} Name`}</label>
...
{/* Make Delete Button */}
<button data-idx={idx} onClick={handleDeleteCredit}>Delete Credit</button>
</div>
);
};
CreditInputs.propTypes = {
idx: PropTypes.number,creditState: PropTypes.array,handleCreditChange: PropTypes.func,// Assign handleDeleteCredit a PropType
handleDeleteCredit: PropTypes.func
};
export default CreditInputs;
任何想法将不胜感激!
解决方法
您必须在 e.preventDefault()
的顶部调用 handleDeleteCredit
。问题是默认的表单行为,结果是整个页面重新加载。
const handleDeleteCredit = (e) => {
e.preventDefault();
const updatedCredits = [...creditState];
updatedCredits.splice(parseInt(e.target.dataset.idx),1)
setCreditState(updatedCredits);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。