使用 reactjs 切換組件

Question

我有一個應用程序，用戶可以在表單中添加數據，然后他可以保存並獲取值。 另外，我有一個動態表單<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

Answer 1

有一個非常簡單的解決方案，我建議您學習如何正確調試應用程序以找出您的代碼存在的問題。 只有當你在正確調試后無法弄清楚如何解決問題時，才開始在 stackoverflow 上詢問其他人。

---

所以解決方案。

當fieldsOnEdit包含索引或defaultMode為 false 時，您正在顯示Edit組件。 因此，當您進入編輯模式時，您已將索引放入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);
  };

將此新回調傳遞給Edit props：

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