最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

我如何将数据从React发送到Node服务器,然后将结果返回给React?

运维笔记admin8浏览0评论

我如何将数据从React发送到Node服务器,然后将结果返回给React?

我如何将数据从React发送到Node服务器,然后将结果返回给React?

我如何将数据从React发送到Node服务器,然后将结果返回给React?我在react上有表单,并且表单中有一些数据,我想将此数据发送到节点服务器以更改此数据并返回结果以进行响应。

反应代码:

var Exp = React.createClass({
getInitialState: function () {
    return {count: ""};
},

handleChange: function (event) {
    this.setState({count: event.target.value});
},
render: function () {
    return <div>
        <h1>Count: {this.state.count}</h1>

        <form method="post">
            <input type="text" onChange={this.handleChange}/>
            <button onClick={this._onChange}>Submit</button>
        </form>
    </div>;
},
_onChange: function (event) {
    event.preventDefault();
    console.log("count: " + this.state.count);
}});React.render(<Exp />, document.getElementById('container'));

节点:

var express = require('express');
var mathjs = require('mathjs');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser());
app.get('/', function (req, res) {

var html = '<form action="/" method="post">' +
    '<input type="text" name="expression"  />' +
    '<br>' +
    '<button type="submit">Submit</button>' +
    '</form>';

res.send(html);});

app.post('/', function (req, res) {

var expResult = mathjs.eval(req.body.expression);

var html = 'Result: ' + expResult + '.<br>' +
    '<a href="/">Try again.</a>';
res.send(html);});

app.listen(3333);
回答如下:

_onChange方法中进行ajax调用。根据服务器的响应,在成功回调中调用setState({...})

发布评论

评论列表(0)

  1. 暂无评论