如何构建React容器和组件来处理表单的生命周期？

Question

我想要一些有关如何组织我的容器和组件的经验建议.

我的问题是,当用户在React.Component InviteForm中提交表单时,我应该在哪里有handleSubmit函数？在容器或组件？

此外,在handleSubmit之后,我应该在哪里获得更新视图的代码以向用户显示成功的UI - 例如:成功!你的邀请已被发送.

欣赏在React中解决上述反应形式-redux生命周期的最佳实践.谢谢

Answer 1

React 中的主要模式（在 rect-redux 中更重要）是用户操作不会直接导致更改用户界面的操作。用户操作会导致更改状态的操作。一旦状态更改，使用该部分状态的所有组件都会重新渲染，并且它们只需注意正确渲染反映状态即可。

这如何适用于您问题的这一部分：“此外，在handleSubmit之后，我应该在哪里有更新视图以向用户显示成功UI的代码 - 例如：成功！您的邀请已发送。” ？

答案是您不需要更新视图的部分代码来显示“成功”消息。您需要部分代码来修改部分状态（在 redux 操作创建者和减速器中），以反映成功的邀请，例如state.invitationSuccess: true.

如果这部分状态为真，您的组件将负责显示成功消息。

至于谁应该处理提交，两种方法都可以使用，其中一种方法更简单，其中表单组件处理提交（可能通过分派操作）。在您使用同一表单编辑多个实体的情况下，容器处理提交的方式可能会更加灵活。