我正在嘗試制作一個可以動態生成輸入欄位的表單。在運行時它會運行，但 react 會引發關于不是受控組件的警告。我在網上看到的解決方案的任何示例都使用類和建構式，有沒有其他方法可以在不使用類的情況下做到這一點？
import { useState } from 'react';
function Try() {
const [formFields, setFormFields] = useState([
{ StepNo: '', StepDisc: '' },
])
const handleFormChange = (event, index) => {
let data = [...formFields];
data[index][event.target.name] = event.target.value;
setFormFields(data);
}
const submit = (e) => {
e.preventDefault();
console.log(formFields)
}
const addFields = () => {
let object = {
StepNo: '',
StepDiscs: ''
}
setFormFields([...formFields, object])
}
const removeFields = (index) => {
let data = [...formFields];
data.splice(index, 1)
setFormFields(data)
}
return (
<div className="">
<form onSubmit={submit}>
{formFields.map((form, index) => {
return (
<div key={index}>
<input
name='StepNo'
placeholder='StepNo'
onChange={event => handleFormChange(event, index)}
value={form.StepNo}
/>
<input
name='StepDisc'
placeholder='StepDisc'
onChange={event => handleFormChange(event, index)}
value={form.StepDisc}
/>
<button onClick={() => removeFields(index)}>Remove</button>
</div>
)
})}
</form>
<button onClick={addFields}>Add More..</button>
<br />
<button onClick={submit}>Submit</button>
</div>
);
}
export default Try;
uj5u.com熱心網友回復：
當您在添加時初始化新表單資料時，您的代碼中只是有錯字。代替
let object = {
StepNo: '',
StepDiscs: ''
}
它應該是
let object = {
StepNo: '',
StepDisc: ''
}
uj5u.com熱心網友回復：
您需要更改StepDiscs為StepDisc:-)
const addFields = () => {
let object = {
StepNo: '',
StepDiscs: ''
}
uj5u.com熱心網友回復：
它與您遇到的錯誤無關，但我建議您將密鑰系結到唯一密鑰，因為它會在您洗掉專案時產生不可預知的問題。
const addFields = () => {
// Id should has a unique a id to be used in as a key.
const id = generateUniqueKey()
let object = {
StepNo: '',
StepDiscs: '',
id
}
setFormFields([...formFields, object])
}
{formFields.map((form, index) => {
return (
<div key={form.id}>
<input
name='StepNo'
placeholder='StepNo'
onChange={event => handleFormChange(event, index)}
value={form.StepNo}
/>
<input
name='StepDisc'
placeholder='StepDisc'
onChange={event => handleFormChange(event, index)}
value={form.StepDisc}
/>
<button onClick={() => removeFields(index)}>Remove</button>
</div>
)
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/496435.html
標籤：javascript 反应 dom 状态
上一篇：Vue：帶有條件的V-if
下一篇：回應預檢請求的Cors問題