如何解决我无法在 REACTJS 上使用 onChange、useState 和 spread 运算符输入我的输入
这是我设置初始状态的方法，我使用预定义的变量来计算保险公司的数量，然后我创建了一个文本框，他们可以在其中填写他们的姓名、ID 等。
function fields() {
for (let i = 1; i <= pax; i++) {
this[`insuredType${i}`] = state[`insuredType${i}`];
this[`insuredBirthDate${i}`] = state[`insuredBirthDate${i}`];
this[`insuredIdType${i}`] = state[`insuredIdType${i}`];
this[`insuredIdNumber${i}`] = state[`insuredIdNumber${i}`];
this[`insuredLastName${i}`] = state[`insuredLastName${i}`];
this[`insuredFirstName${i}`] = state[`insuredFirstName${i}`];
}
}
var object = new Array(pax);
for (let i = 1; i <= pax; i++) {
object = new fields();
}
const [insuredForm,setInsuredForm] = useState(object);
const handleForm = (e) => {
console.log([e.target.name]);
setInsuredForm({ ...insuredForm,[e.target.name]: e.target.value });
};
useEffect(() => {
console.log(insuredForm);
},[insuredForm]);
然后这是我的表单，我认为我的问题出在我的句柄表单上，如果我将其更改为 defaultValue 它可以工作，但是当我将我的 insuranceTypes 更改为 self 时，它不会将数据值复制到文本框。
const tabList = [];
const tabBody = [];
//const tabForm = [];
for (let i = 1; i <= pax; i++) {
tabList.push(
<li key={i} className="nav-item" role="presentation">
<a
className={i === 1 ? "nav-link active" : "nav-link"}
role="tab"
data-toggle="tab"
href={`#tab-${i}`}
>
Insured {i}{" "}
{(errors["insuredType" + i] ||
errors["insuredBirthDate" + i] ||
errors["insuredLastName" + i] ||
errors["insuredFirstName" + i] ||
errors["insuredIdType" + i] ||
errors["insuredIdNumber" + i]) && (
<span role="alert" style={{ color: "#FC9191" }}>
<FontAwesomeIcon
icon={faExclamationCircle}
style={{ marginRight: 2 }}
size="1x"
/>
</span>
)}
</a>
</li>
);
tabBody.push(
<div
key={i}
className={i === 1 ? "tab-pane active" : "tab-pane"}
role="tabpanel"
id={`tab-${i}`}
>
{getTabContent(i)}
</div>
);
}
//console.log(tabForm);
function getTabContent(id) {
//if (insuredForm) console.log(insuredForm);
let newDiv,type,tbirthDate,tidType,tidNumber,tlastName,tfirstName,treadOnly;
let insuredType,insuredBirthDate,insuredIdType,insuredIdNumber,insuredLastName,insuredFirstName;
type = insuredForm[`insuredType${id}`];
tbirthDate =
insuredForm[`insuredType${id}`] === "Self"
? birthDate
: insuredForm[`insuredBirthDate${id}`];
tidNumber =
insuredForm[`insuredType${id}`] === "Self"
? idNumber
: insuredForm[`insuredIdNumber${id}`];
tlastName =
insuredForm[`insuredType${id}`] === "Self"
? state.phLastName
: insuredForm[`insuredLastName${id}`];
tfirstName =
insuredForm[`insuredType${id}`] === "Self"
? state.phFirstName
: insuredForm[`insuredFirstName${id}`];
tidType =
insuredForm[`insuredType${id}`] === "Self"
? idType
: insuredForm[`insuredIdType${id}`];
treadOnly = insuredForm[`insuredType${id}`] === "Self" ? true : false;
insuredType = {
defaultValue: type,onChange: handleForm,};
insuredBirthDate = {
defaultValue: tbirthDate || "",readOnly: treadOnly,};
insuredIdType = {
value: tidType || "",};
insuredIdNumber = {
value: tidNumber || "",};
insuredLastName = {
value: tlastName || "",};
insuredFirstName = {
value: tfirstName || "",};
newDiv = (
<form onChange={handleSubmit(handleCheck)}>
<div
className="row mt-2"
style={{ marginBottom: -15 }}
key={id}
>
<div className="col-sm-12">
{errors["insuredType" + id] && (
<p role="alert" className="errorHandler mb-0">
- {errors["insuredType" + id].message}
</p>
)}
{errors["insuredBirthDate" + id] && (
<p role="alert" className="errorHandler mb-0">
- {errors["insuredBirthDate" + id].message}
</p>
)}
{errors["insuredIdNumber" + id] && (
<p role="alert" className="errorHandler mb-0">
- {errors["insuredIdNumber" + id].message}
</p>
)}
{errors["insuredLastName" + id] && (
<p role="alert" className="errorHandler mb-0">
- {errors["insuredLastName" + id].message}
</p>
)}
{errors["insuredFirstName" + id] && (
<p role="alert" className="errorHandler mb-0">
- {errors["insuredFirstName" + id].message}
</p>
)}
</div>
</div>
<div className="row">
<div className="col-md-6 py-3">
<div className="row">
<div className="form-group col-sm-6">
<label>Type </label>
<select
name={`insuredType${id}`}
{...insuredType}
ref={register({
required: "Type of insurer is required",})}
className={
errors["insuredType" + id]
? "form-control is-invalid"
: "form-control"
}
>
<option value="">Select type</option>
<option>Self</option>
<option>Other</option>
<option>FAO</option>
</select>
</div>
<div className="form-group col-sm-6">
<label>Birthdate </label>
<input
type="date"
name={`insuredBirthDate${id}`}
{...insuredBirthDate}
ref={register({
required: "Birthdate is required",})}
className={
errors["insuredBirthDate" + id]
? "form-control is-invalid"
: "form-control"
}
/>
</div>
</div>
<div className="row">
<div className="form-group col-sm-6">
<label>Last Name </label>
<input
type="text"
name={`insuredLastName${id}`}
placeholder="Last Name"
{...insuredLastName}
ref={register({
required: "Last name is required",})}
className={
errors["insuredLastName" + id]
? "form-control is-invalid"
: "form-control"
}
/>
</div>
<div className="form-group col-sm-6">
<label>First Name </label>
<input
type="text"
name={`insuredFirstName${id}`}
placeholder="First Name"
{...insuredFirstName}
ref={register({
required: "First name is required",})}
className={
errors["insuredFirstName" + id]
? "form-control is-invalid"
: "form-control"
}
/>
</div>
</div>
</div>
<div className="col-md-6 py-3">
<div className="row">
<div className="form-group col-sm-6">
<label>Type of ID </label>
<select
name={`insuredIdType${id}`}
{...insuredIdType}
ref={register({
required: "ID is required",})}
className={
errors["insuredIdType" + id]
? "form-control is-invalid"
: "form-control"
}
>
{listIdType}
</select>
</div>
<div className="form-group col-sm-6">
<label>ID Number </label>
<input
type="text"
name={`insuredIdNumber${id}`}
placeholder="ID Number"
{...insuredIdNumber}
ref={register({
required: "ID number is required",})}
className={
errors["insuredIdNumber" + id]
? "form-control is-invalid"
: "form-control"
}
/>
</div>
</div>
</div>
</div>
</form>
);
return newDiv;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
