如何跟蹤“Ant Design-Dynamic Form Item”並將所有值存儲在單個對象狀態中？

Question

所以我正在使用 Ant Design 動態表單項，您可以創建任意數量的輸入字段。

問題是如何將所有值(static field and new fields)存儲在我的狀態內的單個array of objects ？

請看一下我的組件

如果您單擊添加，它將創建另一個自動完成和一個輸入字段。 然后你輸入數據

例如我想要一個這樣的對象數組

[{commisionFor: 'Invoicing' , perctange: 10},{newcondition: 'something' , percentage: 32},{} , {} , {] , and etc ]

我想實現這個。 我怎樣才能做到這一點 ？ 我會感謝你的幫助

PS ：我沒有在這里輸入我的代碼，因為它很復雜，我什至不知道我做了什么。 看看這個 Ant Design Dynamic Form Item 沙箱

Ant 動態表單項 CodeSandBox

Answer 1

您可以使用 onChange 事件分別存儲所有值。

const [values, setValues] = useState({})

const onChangeHandler = (name, value) =>{
   let data = values;
    data[name] = value;

   setValues(data)
}

並在您的多個輸入字段中，為每個輸入字段創建唯一名稱。

 fields.map((name, index) => {
    <Input placeholder={name} name={name} onChange={(e) => onChangeHandler(name, e.target.value)} />
})

使用您自己的屬性來命名字段或僅使用索引值。