我有一个应用程序,用户可以在表单中添加数据,然后他可以保存它并获取值。另外,我有一个动态表单<DynamicFieldSet/>,用户可以在其中添加他想要的字段数。在动态形式中,我必须在每种形式之间切换。应该切换的组件<Edit/>。所以当用户点击submit按钮时,应该出现<Edit/>组件,当组件出现时,用户可以切换回点击back to default mode按钮。
场景:用户点击Add field,然后点击Add field to inner,然后填写输入。之后点击submit inner按钮,之后应该会出现<Edit/>带有输入数据的组件。当用户点击 时back to default mode,应该出现默认模式。
<Form.List onFinish={onFinish} name={[props.fieldKey, "inner"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) =>
!fieldsOnEdit.includes(index) && defaultMode === true ? (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
rules={[{ required: true, message: "Missing first name" }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit inner{setFieldOnEdit(index)}
</Button>
</Form.Item>
</Space>
) : (
<Edit value={formVal} mode={setDefaultMode} keyForm={index} />
)
)}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field to inner
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
问题:如何实现我所描述的?
演示:https : //codesandbox.io/s/wonderful-ives-o81ue?file=/SubForm.js