Reactjs 基于形式的子组件间组件切换反应方法

我目前正在做我的第一个FE项目，我应该完全由我自己创建

我有一个组件，它应该包含3个子组件，每个子组件应该显示一个表单

目前，我选择了我非常满意的方法，但后来我开始考虑测试，我意识到我基本上无法为父组件创建一个不依赖子组件的测试。父组件如下所示：

return (
<div className="personal-data-step-wrapper">
  {currentForm === 0 && <UserDataForm handleChangeForm={handleChangeForm}
                                      setValues={setUserDataFormValues}
                                      defaultValues={userDataFormValues}/>}
  {currentForm === 1 && <CertificateDataForm handleChangeForm={handleChangeForm}
                                             setValues={setCertificateDataFormValues}
                                             defaultValues={certificateDataFormValues}/>}
  {currentForm === 2 && <QSCDDeviceDataForm onStepFinish={onFinish}
                                            handleChangeForm={handleChangeForm}
                                            setValues={setQSCDeviceDataFormValues}
                                            defaultValues={qSCDDeviceDataFormValues}/>}
</div>
)

您可以看到，在成功提交表单后或切换到上一个表单时，在子组件中完成表单之间的更改。提交最后一个表单后，父组件将所有子表单的数据收集到单个对象中，并使用它调用存储库接口函数

当我试图创建一个测试来测试组件之间的切换时，我不得不找到一个呈现子组件的按钮，我觉得这是一个错误的方法

所以我的问题是：我该如何处理这样的任务？我的方法是正确的，还是根本错误的

---

感谢您的所有建议和回复。

我认为很明显，您应该从父组件中调用

handleChangeForm（）

，如下所示：

a） 如果它是一个类组件

componentDidUpdate(prevProps, prevState) {
    if (this.state.currentForm !== prevState.currentForm)
        this.handleChangeForm(this.state.currentForm);
}

useEffect(() => {
    handleChangeForm(currentForm);
}, [currentForm]);

b） 如果它是一个功能组件

componentDidUpdate(prevProps, prevState) {
    if (this.state.currentForm !== prevState.currentForm)
        this.handleChangeForm(this.state.currentForm);
}

useEffect(() => {
    handleChangeForm(currentForm);
}, [currentForm]);

我认为您的

变更形式
是一个状态值，但无论如何，您得到了这个想法

编辑

如果要从子级中排除表单更改逻辑，可以将“下一步”按钮移动到父级。这样，您只需询问相关的孩子表单输入是否有效，以及孩子是否确认，然后从家长内部更改表单

你要求的是测试这个逻辑，不包括孩子们。完全有可能，你会嘲笑孩子们的“确认”（例如简单的对/错）。
谢谢你的回复。我明白了这个想法，但我不确定当用于更改表单的按钮包含在子组件中时，如何在父组件中调用组件更改。handleChangeForm方法是一种调用setCurrentForm（状态值设置器）的方法，同时确保值在特定范围内。目前，我的方法只是将handleChangeForm setter作为一个道具发送给子组件，子组件在单击submit按钮时调用handleChangeForm。如果方法和状态值都位于父组件中，我不认为这里有问题……我希望父组件尽可能与子组件无关（也许这是一个错误的方法）因此，当我创建一个测试时，我想在所有三种可能的currentform状态之间切换，甚至不知道是否呈现了child，这现在是不可能的，因为我需要找到一个continue按钮，它是child组件的一部分。我的第一个想法是将控件按钮放在父窗体上，但这样我就无法调用child表单验证，如果数据无效，它将阻止我继续下一个表单。那么，您认为我应该如何在测试中调用handleChangeForm？谢谢，这似乎是一个我很乐意接受的想法。我以前也在考虑过这一点，但我如何要求孩子们进行确认？我不知何故需要调用form.submit函数which然后将提交的结果状态传播到父组件中。我只提供了一个解决方案，其中我将传递一个状态布尔值“submit”在子级中，然后在子级中，我将使用useEffect with condition on submit value，这将在真值情况下调用form.submit，然后我将需要传递状态值设置器，该设置器将结果发送到父级。您知道更好的方法吗？如果您需要进一步的帮助，请发布您的验证逻辑（实现）