html - example - ¿Cómo crear formularios con React y Rails?

react select onchange

Question

Con Rails, creo formularios usando la etiqueta form_for.

Rails genera el formulario HTML automáticamente, incluida la autenticidad_token para la seguridad contra la falsificación de solicitudes entre sitios (CSRF).

Con React utilizo JSX, así que no puedo renderizar erb en un componente React.

En un componente React, escribo HTML manualmente.

Quiero usar React en mi aplicación Rails, y aún tengo las ventajas de Rails.

O , si no hay forma de obtener las ventajas de Rails de form_for cuando utilizo React como V de mi aplicación, ¿cómo puedo escribir una forma adecuada como componente Reaccionar?

Si primero escribo mi form_for y luego miro el HTML renderizado, lo copio y lo pego en mi componente React, ¿es una buena idea?

Por ejemplo, aquí se representa HTML desde 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>

Answer 1

Puedes hacer algo como esto:

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

y pon el csrf-token en una metaetiqueta dentro de tu vista / diseño si aún no está allí.

Answer 2

Puedes pegar authenticity_token en el componente reaccionar.

Usando gem react-rails

= react_component ''Form'', authenticity_token: form_authenticity_token

form_authenticity_token es el ayudante de los carriles.

Entonces puedes pegarlo en tu forma.

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

No es la mejor solución. Me gustaría que alguien diga una mejor solución.

Answer 3

Si representa el HTML base con Rails e incrusta un componente React con react-rails , puede escribir de esta manera:

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

Answer 4

Puedes renderizar tu formulario dentro de un bloque invisible y luego clonarlo en un componente de reacción

/* 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]
  )

Espero que esto ayude.