简体   繁体   English

是否可以将 Symfony 表单组件与 React.js 一起使用?

[英]Is it possible to use the Symfony form component with React.js?

I am using the Symfony form component.我正在使用 Symfony 表单组件。 I have many forms in my project.我的项目中有很多表单。

To perfectly learn the form component was a long way to go, but now I love it.完美地学习表单组件还有很长的路要走,但现在我喜欢它。 I love also the automatic validation and so on.我也喜欢自动验证等。

So.所以。 now I want to learn and use React.js in my project.现在我想在我的项目中学习和使用 React.js。

But it seems, there is no way I can use the validation and form builder like before for the projects?但看起来,我无法像以前一样为项目使用验证和表单构建器? Am I right there?我在吗?

While, in an API context, you won't use the Form Component to actually render your form in HTML format ( $form->createView() method), you can still benefit from all the magic it offers: validation, form events, etc. API or not, I personnally think you should always use Form Types in Controller mutations.虽然在 API 上下文中,您不会使用表单组件以 HTML 格式( $form->createView()方法)实际呈现表单,但您仍然可以从它提供的所有魔法中受益:验证、表单事件、等 API 与否,我个人认为您应该始终在控制器突变中使用表单类型。

For example, using FOSRestBundle, consider some simple Controller action looking like this:例如,使用 FOSRestBundle,考虑一些简单的控制器操作,如下所示:

/**
 * @Rest\Put("posts/edit/{id}", name="posts.edit", requirements={"id"="\d+"})
 *
 * @param Post $post
 * @param Request $request
 *
 * @return Post
 *
 * @throws BadRequestException
 *
 */
public function edit(Post $post, Request $request): Post
{
    $form = $this->createForm(PostType::class, $user);
    $form->handleRequest($request);
    $form->submit($request->request->all());
    if ($form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($post);
        $em->flush();

        return $post;
    }

    // Any error handling of your taste.
    // You could consider expliciting form errors.
    throw new BadRequestException();
}

Note that Post entity and PostType form must be created, of course.请注意,当然必须创建Post实体和PostType表单。 I won't be detailing it here as there is nothing special to say about them in this context.我不会在这里详细说明,因为在这种情况下没有什么特别要说的。

Also note that we don't check if the form is submitted.另请注意,我们不检查表单是否已提交。 Rendering the form as HTML being React's job in your case, this action won't be used to GET anything, it is exclusively a PUT route.在您的情况下,将表单呈现为 React 的工作是 HTML,此操作不会用于获取任何内容,它只是一个 PUT 路由。 This means that any Request coming there MUST be a PUT Request containing the correct data to be handled by our PostType , submitted in your case by an HTML form manually built in React.这意味着任何到达那里的请求都必须是一个 PUT 请求,其中包含要由我们的PostType处理的正确数据,在您的情况下通过在 React 中手动构建的 HTML 表单提交。

Furthermore, slightly out of the question's scope, FOSRestBundle subscribes to whatever your action returns and automatically serializes it to the configured format (let's say JSON in your case, I guess).此外,稍微超出问题的范围,FOSRestBundle 订阅您的操作返回的任何内容并自动将其序列化为配置的格式(我猜在您的情况下假设为 JSON)。 This means that our example of action can return two possible responses:这意味着我们的动作示例可以返回两种可能的响应:

  • A Response with status code 200 containing our serialized Post.状态码为 200 的响应包含我们的序列化帖子。 (You could also consider a 204 and return nothing.) (您也可以考虑使用 204 并且不返回任何内容。)
  • A Response with status code 400 containing whatever we want (let's say form errors).状态码为 400 的响应包含我们想要的任何内容(假设表单错误)。

Allow me to lead you to theFOSRestBundle's documentation .请允许我引导您查看FOSRestBundle 的文档

Probably not because your form is intended for server use: validation/show errors/data normalization/sanatization/etc.可能不是因为您的表单是供服务器使用的:验证/显示错误/数据规范化/sanatization/等。

Usually you use React to display HTML and connect it to your server using an API.通常您使用 React 来显示 HTML 并使用 API 将其连接到您的服务器。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM