首页 文章

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

提问于
浏览
29

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

Rails自动生成HTML表单,包括authenticity_token,以防止跨站点请求伪造(CSRF) .

使用React我使用JSX,因此我无法在React组件中呈现erb .

在React组件中,我手动编写HTML .

我想在我的Rails应用程序中使用React,并且仍然具有Rails的优点 .

Or ,如果在使用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>

4 回答

  • 7

    您可以在不可见的块内渲染表单,然后将其克隆到react组件中

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

    希望这可以帮助 .

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

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

  • 13

    你可以这样做:

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

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

  • 31

    如果使用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>
        );
      }
    });
    

相关问题