Rails + React js + react-rails gem 单组件提交表单答案

【问题标题】：Rails + React js + react-rails gem submit form with single componentRails + React js + react-rails gem 单组件提交表单
【发布时间】：2016-02-20 14:06:06
【问题描述】：

我正在尝试使用 Rails 在 react js 中提交表单。

我是 React js 新手，这是我的第一个应用程序

我收到错误没有路由匹配 [POST] "/"

使用单个组件（jsx）提交表单。我收到路由错误。

以下是我的代码

编辑

我更改了路线，现在出现错误“InvalidAuthenticityToken in ItemsController#create”

如何在 jsx 文件中引发或警告变量？

我在 route.rb 中添加以下路线

 resources :items
 root :to => redirect("/items")

项目控制器

 def index
    @presenter = { :action => items_path,
            :csrf_token => request_forgery_protection_token,
            :csrf_param => form_authenticity_token
        }
 end    

def create
    @item = Item.new(item_params)
    @item.save
end

private

def item_params      
    params.require(:item).permit(:name, :price)            
end

Index.html.erb

 <%= react_component('Form1', {:presenter => @presenter.to_json}, {:presenter => true})%>

Form1.js.jsx

 var Form1 = React.createClass({
    handeSubmit: function( e ){
    e.preventDefault();

    // var form = e.target;
    // var name = form.querySelector('[name="item[name]"]').value;
    // var price = form.queySelector('[name="item[price]"]').value; 


    var name = this.refs.name.getDOMNode().value.trim();
    var price = this.refs.price.getDOMNode().value.trim();

    if(!name || !price)
    {
        return false;
    }

    var formData = $( this.refs.form.getDOMNode() ).serialize();
    var action = this.props.presenter.action
    // alert({formData});


    $.ajax({    
      data: formData,
      url: action,
      type: "POST",
      dataType: "json",

    });

},




render: function(){
    return (
        <form ref="form" className="" action={ this.props.presenter.action } acceptCharset="UTF-8" method="post" onSubmit={this.handleSubmit} >
            <input type="hidden" name={ this.props.presenter.csrf_param } value={ this.props.presenter.csrf_token } />
            <input ref="name" name="item[name]"  /><br/>
            <input ref="price" name="item[price]" /><br/>
            <button type="submit"> Submit</button> 
        </form>


    )
}

});

【问题讨论】：

很难从这里的有限代码中看出...您的项目控制器是否设置为资源？你验证action = '/items' 发送到ajax 调用了吗？
一切看起来都不错。你能分享你的routes.rb吗？也许到create 的路径不见了？
@gravityplanx 谢谢，请找到我的编辑
@rmosolgo 谢谢，请找到我的编辑

标签： ruby-on-rails forms reactjs

【解决方案1】：

看起来，对于 AJAX 请求，您应该将 CSRF 令牌作为标头发送，而不是作为表单字段。

（文档：http://api.rubyonrails.org/classes/ActionView/Helpers/CsrfHelper.html#method-i-csrf_meta_tags）

以下是在您的案例中添加该标题的方法：

var csrfToken = this.props.presenter.csrf_token; 

$.ajax({    
  data: formData,
  url: action,
  type: "POST",
  dataType: "json",
  // Before sending, add the CSRF header:
  beforeSend: function(xhr) {
    xhr.setRequestHeader('X-CSRF-Token', csrfToken);
  },
});

这对你有用吗？

顺便说一句，我解决此问题的一种方法是使用react_component 作为表单字段，但使用Rails 的form_for 来制作实际的<form> 标签。例如，

<%= form_for @item, remote: true do |f| %>
  <!-- Rails will add CSRF token -->
  <%= react_component("ItemFormFields", item: @item) %>
<% end %>

【讨论】：