Question

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

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

我收到错误没有路线匹配[POST]＆＃34; /＆＃34;

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

以下是我的代码

修改

我更改了路线，现在我在ItemsController中创建了错误＆＃34; InvalidAuthenticityToken #create＆＃34;

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

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

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

上述ItemsController

 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>


    )
}

});

Answer 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＆＃39; form_for制作实际的<form>代码。例如，

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

Rails + React js + react-rails gem提交表单与单个组件

1 个答案: