使用reactjs切换组件 [英] Toggle components using reactjs

问题描述

我有一个应用程序，用户可以在其中添加数据，然后他可以保存数据并获取值.另外，我有一个动态形式< DynamicFieldSet/> ，用户可以在其中添加他想要的字段数.在动态形式中，我必须在每种形式之间切换.应该切换< Edit/> 的组件.因此，当用户单击 submit 按钮时，应该会出现< Edit/> 组件，并且当该组件出现时，用户可以切换回单击默认模式按钮.
场景:用户单击添加字段，然后单击将字段添加到内部，并填写输入.之后，点击 submit内部按钮，然后应该出现< Edit/> 组件，其中包含来自输​​入的数据.当用户单击返回默认模式时，应显示默认模式.

I have an application where user could add data inside form and after that he can save it and get the values. Also, i have a dynamic form <DynamicFieldSet/> where user can add how many fields he wants. In dynamic form i have to switch between each form. The component that should be switched <Edit/>. So when user clicks on submit button, should appears <Edit/> component, and when the component will appear, user can switch back clicking on back to default mode button.
Scenario: User clicks on Add field, after that on Add field to inner, and fill the input. After that clicks on submit inner button, after that should appear <Edit/> component with the data from input. When user click on back to default mode, should appear 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

推荐答案

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

There is a very straightforrward solution for this, I suggest you to learn how to debug an application properly to find out what the problem your code have. And only when you cannot figure how to solve the problem after proper debugging, start asking others here on stackoverflow.

所以解决办法.

当 fieldsOnEdit 包含索引或 defaultMode 为false时，您正在显示 Edit 组件.因此，当您进入编辑模式时，您已将index放入 fieldsOnEdit 中，并将 defaultMode 设置为false.没错但是，当您离开编辑模式时，会将 defaultMode 设置为true，但是您没有从 fieldsOnEdit 中删除其索引.

You are displaying Edit component when fieldsOnEdit contains the index OR defaultMode is false. So when you are entering edit mode, you've put index into your fieldsOnEdit and set defaultMode to false. That's correct. But when your are leaving edit mode you are setting defaultMode to true, but you did not remove its index from fieldsOnEdit.

因此您需要同时做这两个，创建新的回调:

So you need to do both, create new callback:

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

将此新的回调传递给 Edit 道具:

Pass this new callback to Edit props:

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

这篇关于使用reactjs切换组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！