如何跟踪“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)} />
})

使用您自己的属性来命名字段或仅使用索引值。