如何制作將參數提交給Rails控制器的React表單？

Question

所以我有一個由輸入字段組成的react組件。 通過表單的輸入字段提交數據並將其傳遞給控制器​​。 到現在為止還挺好。

事情開始變得復雜的地方是，當我通過react組件提交表單時，我可以看到Rails確認已單擊了Submit按鈕，但是它不捕獲提交的輸入。

有趣的是，當我對常規rails表單執行相同操作時，數據會通過視圖傳遞給控制器​​。 沒問題

這是react組件：

 import React from 'react'
 import userInput from "./userInput";
 import ReactDOM from "react-dom";

 class InputField extends React.Component {

     constructor(props) {
         super(props);
         this.state = {
             value: ''
         };
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
     }

     handleChange(event) {
         this.setState({
             value: event.target.value
         });
     }

     handleSubmit(event) {
         const input = userInput(this.state.value);
         this.setState({
             input
         });
         event.preventDefault()
     }

     render() {
         return ( < form onSubmit = {
                 this.handleSubmit
             }
             action = "/get-location"
             method = "post" >
             < input type = "text"
             value = {
                 this.state.value
             }
             onChange = {
                 this.handleChange
             }
             placeholder = "What is your zip code ?" / >
             < input type = "submit"
             value = "Check my area" / >
             < /form>
         );
     }
 }

 document.addEventListener('DOMContentLoaded', () => {
     ReactDOM.render( < InputField / > ,
         document.getElementById('test')
     )
 });

 export default InputField 

這是應該接收數據的控制器：

 def get_location
    @get_user_input = params[:user_input]#.join.to_i
    puts "user from IP address '#{$new_request}' queried zip code '#{@get_user_input}' at '#{$time}'"
  end

和視圖：

<div>
  <%= f.text_field '', placeholder: 'What is your zip code ?', id:'test'%>
</div>
<div>alert"></div>
<div>
  <%= f.button 'Check my area', id: 'button', onclick: 'getUserInput()'%>
</div>
<% end %>

和shell輸出，當我使用rails表單提交時：

Started POST "/get-location" for 127.0.0.1 at 2018-05-15 14:55:12 -0400
Processing by WelcomeController#get_location as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"U/a5LQTCNKnHn3ZoHfGJBAQt9tdgnK+7y7jDTmoY2iFWbuwrl/G9XacnQeIz/TCRKfT9WXPoeJgGWSRFvOdB9w==", "user_input"=>["fsdfsdfdf"], "button"=>""}
user from IP address '127.0.0.1' queried zip code '["fsdfsdfdf"]' at '15/05/18 14:55'
No template found for WelcomeController#get_location, rendering head :no_content
Completed 204 No Content in 27ms

並帶有rails組件：

tarted POST "/get-location" for 127.0.0.1 at 2018-05-15 14:55:48 -0400
Processing by WelcomeController#get_location as HTML
Can't verify CSRF token authenticity.
user from IP address '127.0.0.1' queried zip code '' at '15/05/18 14:55'
No template found for WelcomeController#get_location, rendering head :no_content
Completed 204 No Content in 26ms

如您所見，在帶有rails形式的queried zip code ，有數據，但queried zip code沒有傳遞。

所以我想做的就是通過視圖將輸入從react組件傳遞到控制器，但是我不知道我在這里缺少什么或做錯了什么。

任何想法如何實現這一目標？

Answer 1

您需要通過以下方式將CSRF令牌傳遞到您的react form組件中

<input type='hidden' name="authenticity_token" value={this.props.authenticityToken} />

render() {
     return ( < form onSubmit = {
             this.handleSubmit
         }
         action = "/get-location"
         method = "post" >
         < input type = "text"
         value = {
             this.state.value
         }
         onChange = {
             this.handleChange
         }
         placeholder = "What is your zip code ?" / >
         < input type = "submit"
         value = "Check my area" / >

         <input type='hidden' name="authenticity_token" value= 
         {this.props.authenticityToken} />

         < /form>
     );
 }

this.props.authenticityToken的值來自rails helper form_authenticity_token

如果使用react-rails gem，可以將其傳遞給組件，如下所示：

<%= react_component "Foo", { authenticityToken, form_authenticity_token } %>