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

Question

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

• 我的React容器是InvitePage
• 我的React组件是InviteForm

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

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

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

Answer 1

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

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

答案是你不需要部分代码来更新视图以显示＆＃34;成功＆＃34;信息。您需要部分代码来修改部分状态（在redux动作创建者和缩减器中），以反映成功的邀请，如state.invitationSuccess: true。

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

至于谁应该处理提交，可以使用两种方法，一种是表单组件处理提交（可能通过调度操作），更简单。在您使用相同的表单编辑多个实体的情况下，容器处理提交的内容可能更灵活。