我如何跟踪“蚂蚁设计 - 动态形式”项目。并将所有值存储在一个对象状态中？

Question

因此，我使用的是ant Design 您可以创建所需的输入字段。

问题是如何将所有值（静态字段和新字段）存储在我的状态中的单个数组中？

请查看我的组件

如果单击单击，请添加它将创建另一个autocompletete和aputfield。例如，您输入数据

，例如，我想要这样的对象，

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

我想实现这一目标。我该怎么做？我将感谢您的帮助

PS ：我不是在这里键入代码，因为这很复杂，我什至不知道自己做了什么。看看这个蚂蚁设计动态表单sandbox

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)} />
})

将自己的属性用于命名字段，或者仅使用索引值。