Как создавать формы с помощью React и Rails?

С Rails я создаю формы, используя тег form_for.

Rails автоматически генерирует HTML-форму, в том числе authenticity_token для защиты от подделки запросов на межсайтовый запрос (CSRF).

С React я использую JSX, поэтому я не могу отображать erb в компоненте React.

В компоненте React я пишу HTML вручную.

Я хочу использовать React в моем приложении Rails и по-прежнему иметь преимущества Rails.

Или, если нет способа получить преимущества Rails для form_for при использовании React как V моего приложения, как я могу написать правильную форму как компонент React?

Если я сначала напишу свой form_for, а затем посмотрю на визуализированный HTML, скопирую его и вставьте в свой компонент React, это хорошая идея?

Например, здесь отображается HTML из form_for:

<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>

Ответ 1

Вы можете вставить authenticity_token в компонент реакции.

Используя 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>

Это не лучшее решение. Я был бы рад, если кто-то скажет лучшее решение.

Ответ 2

Вы можете сделать что-то вроде этого:

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

и поместите csrf-token в метатег внутри вашего представления/макета, если он еще не существует.

Ответ 3

Если вы создаете базовый HTML с Rails и вставляете в него компонент 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>
    );
  }
});

Ответ 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]
  )

Надеюсь, что это поможет.