javascript - 如何创建动态字段的Ant设计组(How to Create Ant Design group of Dynamic fields)

Question

I'm using ant design dynamic form .(我正在使用ant设计动态表单 。)

How I suppose to create a group of dynamic forms(我应该如何创建一组动态表单) Code: https://codesandbox.io/s/vvl2yxqr5l(代码： https ： //codesandbox.io/s/vvl2yxqr5l) Scenario(情境) User need to enter the team name and team members name dynamically.(用户需要动态输入团队名称和团队成员名称。) Is it possible add the dynamic fields inside the dynamic field by ant design.(是否可以通过蚂蚁设计将动态字段添加到动态字段中。)   ask by Selvin translate from so

Answer 1

Yes, it is possible to create a nested dynamic form using ant design dynamic form component.(是的，可以使用ant design动态表单组件创建嵌套的动态表单。)

I have also asked the same question How to create a questionnaire type form using Ant Design?(我也曾问过同样的问题如何使用Ant Design创建问卷类型表格？) .(。) You need to add your own logic but here I am providing the basic structure:(您需要添加自己的逻辑，但是在这里，我提供了基本结构：) To remove team name:(删除团队名称：) remove = k => { const { form } = this.props; const keys = form.getFieldValue("newkeys"); form.setFieldsValue({ newkeys: keys.filter(key => key !== k) }); }; To add team name:(要添加团队名称：) add = () => { const { form } = this.props; const keys = form.getFieldValue("newkeys"); const nextKeys = keys.concat(uuid); uuid++; form.setFieldsValue({ newkeys: nextKeys }); }; To remove team member:(删除团队成员：) remove1 = (k, l) => { const { form } = this.props; const keys = form.getFieldValue("answerkey" + k); let newkeys = []; if (keys) { newkeys = keys; } else { newkeys = []; } form.setFieldsValue({ ["answerkey" + k]: newkeys.filter(key => key !== l) }); }; To add team member:(要添加团队成员：) add1 = index => { const { form } = this.props; const keys = form.getFieldValue("answerkey" + index); let newkeys = []; if (keys) { newkeys = keys; } else { newkeys = []; } const nextKeys = newkeys.concat(uuid1); uuid1++; form.setFieldsValue({ ["answerkey" + index]: nextKeys }); }; I have created a working demo on codesandbox.io .(我已经在codeandbox.io上创建了一个工作演示。)