如何使用 React 和 Rails 创建表单？答案

【问题标题】：How to create forms with React and Rails?如何使用 React 和 Rails 创建表单？
【发布时间】：2015-09-22 13:42:04
【问题描述】：

在 Rails 中，我使用 form_for 标签创建表单。

Rails 自动生成 HTML 表单，包括用于防止跨站请求伪造 (CSRF) 的安全性令牌。

在 React 中我使用 JSX，所以我无法在 React 组件中渲染 erb。

在 React 组件中，我手动编写 HTML。

我想在我的 Rails 应用程序中使用 React，并且仍然拥有 Rails 的优势。

或者，如果在我的应用程序中使用React作为V时无法获得form_for的Rails优势，我该如何编写一个合适的表单作为React组件？

如果我先编写 form_for，然后查看呈现的 HTML，将其复制并粘贴到我的 React 组件中，这是个好主意吗？

例如这里是从 form_for 渲染的 HTML：

<form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="1AXH9blzaH4qEAAWTvu6aAH84btA/9DZCpFDBhiJ0/H9uAKsPAB/rFQWY1VmWA1yNtFaigO50p6joa3X8CItBA==" />
  

  <div class="field">
    <label for="user_Имя">Имя</label><br>
    <input placeholder="Бил Гейтс" type="text" name="user[name]" id="user_name" />
  </div>


  <div class="actions">
    <input type="submit" name="commit" value="Открыть заявку" class="button tiny" />
  </div>

</form>

【问题讨论】：

据我所知，您无法真正做到两全其美。如果您使用form_for，您将获得 Rails 的所有优势，但 React 不会知道表单的 DOM，因此它无法完成它的工作。
最大的问题是：你想用 React 在你的表单中做什么？
你也许可以使用 LinkState React mixin。它允许您将表单输入绑定到组件的状态。从那里，您可以处理提交回 Rails（通过 API）。 facebook.github.io/react/docs/…
我们应该开发生成 jsx 组件的 rails 助手：form_for_jsx

标签： html ruby-on-rails reactjs

【解决方案1】：

您可以将authenticity_token 粘贴到 react 组件中。

使用gem react-rails

= react_component 'Form', authenticity_token: form_authenticity_token

form_authenticity_token 是 rails 助手。

这样您就可以将其粘贴到您的表单中。

<form role='form' accept-charset="UTF-8" action='/action' method='post'>
  ...
  <input type='hidden' name='authenticity_token' value={this.props.authenticity_token} />
  ...
</form>

这不是最好的解决方案。如果有人能提供更好的解决方案，我会很高兴。

【讨论】：

【解决方案2】：

你可以这样做：

$(document).ready(function(){
  $.ajaxSetup({
    headers: {
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
  });
});

如果csrf-token 不存在，则将其放入视图/布局内的元标记中。

【讨论】：

【解决方案3】：

如果你用 Rails 渲染基础 HTML 并用 react-rails 嵌入一个 React 组件，你可以这样写：

var YourForm = React.createClass({
  render: function() {
    var csrfToken = $('meta[name=csrf-token]').attr('content');
    return (
      <form action='/users' method='post' accept-charset='UTF-8'>
        <input type='hidden' name='_method' value='patch' />
        <input type='hidden' name='utf8' value='✓' />
        <input type='hidden' name='authenticity_token' value={csrfToken} />
        ...
      </form>
    );
  }
});

【讨论】：

【解决方案4】：

你可以在一个不可见的块中渲染你的表单，然后将它克隆到一个反应组件中

/* app/assets/stylesheets/users.scss */
.invisible-form-container {
  display: none;
}

# app/views/users/edit.html.haml
.invisible-form-container
  = render 'form'
.react-container

# app/assets/javascripts/components/form.js.jsx.coffee
class @Form extends React.Component
  html_form: ->
    {__html: $('.invisible-form-container').html()}
  render: ->
    `<div dangerouslySetInnerHTML={this.html_form()} />`

# app/assets/javascripts/initializer.coffee
$ ->
  ReactDOM.render(
    `<Form />`,
    $('.react-container')[0]
  )

希望这会有所帮助。

【讨论】：