web-dev-qa-db-fra.com

Comment créer des formulaires avec React et Rails?

Avec Rails, je crée des formulaires à l’aide de la balise form_for.

Rails génère automatiquement le formulaire HTML, y compris le fichier authenticity_token pour la sécurité contre la falsification de requêtes intersites (CSRF).

Avec React, j'utilise JSX, je ne peux donc pas rendre erb dans un composant React.

Dans un composant React, j'écris HTML manuellement.

Je souhaite utiliser React dans mon application Rails tout en conservant les avantages de Rails.

Ou , s'il n'existe aucun moyen d'obtenir les avantages Rails de form_for lors de l'utilisation de React en tant que V de mon application, comment puis-je écrire un formulaire approprié en tant que composant React?

Si j'écris d'abord mon formulaire_for, puis regarde le code HTML rendu, le copie et le colle dans mon composant React, est-ce une bonne idée?

Par exemple, voici le rendu HTML à partir de 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>

htmlruby-on-railsreactjs
30
yerassyl

Vous pouvez coller authenticity_token dans le composant de réaction.

Utiliser gem react-Rails

= react_component 'Form', authenticity_token: form_authenticity_token

form_authenticity_token est l’assistant Rails.

Vous pouvez donc le coller dans votre formulaire.

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

Ce n'est pas la meilleure solution. Je serais heureux si quelqu'un dirait une meilleure solution.

33
Pavel Kalashnikov

Vous pouvez faire quelque chose comme ça:

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

et placez le csrf-token dans une balise META dans votre vue/mise en page, si elle ne l’est pas déjà. 

13
Blair Anderson

Si vous restituez le code HTML de base avec Rails et y intégrez un composant React avec react-Rails, vous pouvez écrire comme ceci:

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

Vous pouvez rendre votre formulaire à l'intérieur d'un bloc invisible, puis le cloner dans un composant réactif.

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

J'espère que cela t'aides.

1
kraft