使用 reactjs 切换组件

IT技术 javascript reactjs
2021-05-13 22:39:45

我有一个应用程序,用户可以在表单中添加数据,然后他可以保存它并获取值。另外,我有一个动态表单<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

1个回答

对此有一个非常简单的解决方案,我建议您学习如何正确调试应用程序以找出您的代码存在的问题。只有当您在正确调试后无法弄清楚如何解决问题时,才开始在 stackoverflow 上询问其他人。


所以解决方案。

EditfieldsOnEdit包含索引 ORdefaultMode为 false时,您正在显示组件因此,当您进入编辑模式时,您已将 index 放入您的fieldsOnEdit并设置defaultMode为 false。没错。但是当你离开编辑模式时,你设置defaultMode为 true,但你没有从fieldsOnEdit.

所以你需要同时做,创建新的回调:

const setBackToDefaultMode = index => {
    // remove index from array
    setFieldsOnEdit(prevIndexes => prevIndexes.filter(item => item !== index));
    // set default mode
    setDefaultMode(true);
  };

将这个新回调传递给Editprops:

<Edit
    value={props.values}
    mode={setBackToDefaultMode}
    keyForm={index}
/>