Javascript 如何使用 reactjs 在 FORM Submit 中进行 POST 并将对象值传递给 REST 服务？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39153545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do POST in FORM Submit using reactjs and pass the object value into REST service?
提问by JumpMan
I have created a login page using reactjs, when I send my user input/password through a post method rest api call to authenticate I am receiving an error. Can somebody help me on whats going wrong here please!!
我已经使用 reactjs 创建了一个登录页面，当我通过 post 方法 rest api 调用发送我的用户输入/密码以进行身份验证时，我收到了一个错误。有人可以帮我解决这里出了什么问题吗！！
I guess this is because I am unable to send username and password strings in a json format.
我猜这是因为我无法以 json 格式发送用户名和密码字符串。
This is the error,
这是错误，
<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>27</b><br />
<br />
<b>Notice</b>: Undefined variable: id in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}
This is my app.js file,
这是我的 app.js 文件，
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
export default class App extends Component {
render() {
return (
<div className="App">
<div className="App-header"></div>
<form
id="main-login"
action="http://don.healthedata.com/admin/login"
method="post">
<h2>
Admin UI Login
</h2>
<label>
<span class="text">user:</span>
<input type="email" name="email"/><br/>
</label>
<br/>
<label>
<span class="text">password:</span>
<input type="password" name="password"/><br/>
</label><br/>
<div class="align-right">
<button type="submit">Submit</button>
</div>
</form>
</div>
);
}
}
Solution:
Modified and working App.jsfile:
解决方案：
修改和工作的App.js文件：
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
export default class App extends Component {
constructor(props, context) {
super(props, context);
this.state = { description: '' };
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
fetch(this.props.formAction, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({description: this.state.description})
});
this.setState({description: ''});
}
render() {
return (
<div className="App">
<form
id="main-login"
action={this.props.action}
method={this.props.method}
onSubmit={this.onSubmit}>
<h2>Admin UI Login</h2>
<label>
<span class="text">user:</span>
<input type="email" name="email"/><br/>
</label>
<br/>
<label>
<span class="text">password:</span>
<input type="password" name="password"/><br/>
</label>
<br/>
<div class="align-right">
<button>Submit</button>
</div>
</form>
</div>
);
}
}
// App.propTypes = { action: React.PropTypes.string.isRequired, method: React.PropTypes.string}
App.defaultProps = {
action: 'http://don.healthedata.com/admin/login',
method: 'post'
};
module.exports = App;
When I provide user input/password and hit submit, nothing is happening.
当我提供用户输入/密码并点击提交时，什么也没有发生。
采纳答案by LuisPinto
You're right, you are getting this error:
你是对的，你收到这个错误：
{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}
{"code":"INVALID_JSON_INPUT","message":"解码 JSON 输入时出错"}
It means that you are not sending the data as JSON format. You need to process the information that you get from the form, create a JSON object and then send it through a POST request.
这意味着您没有以 JSON 格式发送数据。您需要处理从表单中获取的信息，创建一个 JSON 对象，然后通过 POST 请求发送它。
You can do that with the onSubmitproperty of the form. Handle the data from the form to a new function and then I suggest using fetchto send the POST
您可以使用onSubmit表单的属性来做到这一点。将表单中的数据处理为一个新函数，然后我建议使用 fetch发送 POST
回答by Parth Navadiya
First of all fetch the url in which u want to insert data.Here first create todoadd.js file:
首先获取你想要插入数据的 url。这里首先创建 todoadd.js 文件：
import fetch from 'isomorphic-fetch';
export function createBlogPost(data) {
return fetch('Your Rest url', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
if (response.status >= 200 && response.status < 300) {
return response;
console.log(response);
window.location.reload();
} else {
console.log('Somthing happened wrong');
}
}).catch(err => err);
}
after that control Your UI submit in tododialouge.js:
之后控制你的 UI 在 tododialouge.js 中提交：
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { createBlogPost } from '../../actions/todoadd';
import { addTodo } from '../../actions/todo'
import { setTodoDialogOpen, setErrorText } from '../../actions/todoDialog';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
const initialstate = {
title: '',
desc: '',
type: '',
imageurl: ''
}
class TodoDialog extends Component {
constructor(props) {
super(props)
this.state = initialstate;
this.onChange = this.onChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
onChange(e) {
if (e.target.id === 'title') {
this.setState({ title: e.target.value });
} else if (e.target.id === 'desc') {
this.setState({ desc: e.target.value });
} else if (e.target.id === 'type') {
this.setState({ type: e.target.value });
} else if (e.target.id === 'image') {
this.setState({ imageurl: e.target.value});
console.log(e.target.value);
}
}
handleSubmit() {
const text = {
news_title: this.state.title,
news_description: this.state.desc,
news_type: this.state.type,
news_src_url: this.state.imageurl,
operation:"insert"
}
alert(text.news_src_url);
createBlogPost(text);
setErrorText(undefined);
setTodoDialogOpen(false);
};
render() {
const { messages, todoDialog, setTodoDialogOpen, addTodo, setErrorText } = this.props;
const styles = {
button: {
margin: 12,
},
exampleImageInput: {
cursor: 'pointer',
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
width: '100%',
opacity: 0,
},
};
function handleClose() {
setErrorText(undefined);
setTodoDialogOpen(false);
};
const actions = [< FlatButton label={
messages.cancel || 'cancel'
}
primary={
true
}
onTouchTap={
handleClose
} />, < FlatButton label={
messages.submit || 'submit'
}
primary={
true
}
onTouchTap={this.handleSubmit} />
];
return (
<div>
<Dialog title={messages.todo_add || 'todo_add'} actions={actions} modal={false} open={todoDialog.open} onRequestClose={handleClose}>
<form>
<TextField ref="todoText1" onChange={this.onChange} id='title' hintText={messages.todo_hint1 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label1 || 'todo_label1'} fullWidth={true} />
<TextField ref="todoText2" onChange={this.onChange} id='desc' hintText={messages.todo_hint2 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label2 || 'todo_label2'} fullWidth={true} multiLine={true} rows={1} rowsMax={3} />
<TextField ref="todoText3" onChange={this.onChange} id='type' hintText={messages.todo_hint3 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label3 || 'todo_label3'} fullWidth={true} />
<RaisedButton label='ADD Photo' style={styles.button} labelPosition="before" containerElement="label"><input type='file' onChange={this.onChange} id='image' style={styles.exampleImageInput} /></RaisedButton>
</form>
</Dialog>
</div>
)
}
}
some other file u handle as Your requirment. I hope this one is helpful for You.
您根据您的要求处理其他一些文件。我希望这对你有帮助。
