如何制作一个将参数提交给轨道控制器的反应形式?

Question

所以我有一个由输入字段组成的反应组件。通过表单的输入字段提交数据并将其传递给控制器。目前为止，一切都好。

事情开始变得复杂的是，当我通过 react 组件提交表单时，我可以看到 rails 承认已单击提交按钮，但它没有捕获提交的输入。

有趣的是，当我对普通轨道形式做同样的事情时，数据通过视图传递到控制器。 这里没有问题。

这是反应组件：

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

当我使用轨道形式提交时，和外壳输出：

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

和导轨组件：

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

如您所见，在轨道形式的queried zip code中，有数据，但queried zip code没有通过任何数据。

所以我要做的是通过视图将输入从反应组件传递给控制器，但我不知道我在这里错过了什么或我做错了什么。

知道如何实现这一点吗？

Answer 1

您需要通过以下方式将 CSRF 令牌传递到您的反应表单组件中

<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 助手form_authenticity_token

如果使用react-railsgem，则可以将其传递给组件，如下所示：

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