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

Question

使用Rails,我使用form_for标记创建表单.

Rails自动生成HTML表单,包括authenticity_token,以防止跨站点请求伪造(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>

Answer 1

您可以粘贴authenticity_token到react组件中.

运用 gem react-rails

= react_component 'Form', authenticity_token: form_authenticity_token

form_authenticity_token 铁路助手.

所以你可以将它粘贴到表单中.

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

这不是最好的解决方案.如果有人能说出更好的解决方案,我会很高兴.

Answer 2

你可以这样做:

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

并将其csrf-token放入视图/布局中的元标记中(如果尚未存在).

Answer 3

如果使用Rails呈现基本HTML并使用它嵌入React组件,则react-rails可以这样写:

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>
    );
  }
});