如何从React发送数据到Node服务器并将结果返回给React？

Question

我可以帮您进行翻译。以下是翻译的结果：

如何将数据从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);

- Pavel Chukhnov

Answer 1

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

- Matthew Herbst

---

@PavelChukhnov 当然可以。一旦您开始制作更复杂的React应用程序，请查看Flux / Redux，这将使处理“state”变得更容易处理。如果解决了您的问题，请随时接受答案。 - Matthew Herbst

Answer 2

可以使用axios（就像我目前使用的那样）从浏览器中进行XMLHttpRequests，或者您可以使用其他任何依赖项来进行ajax调用。在您的_onChange函数中，您需要编写类似下面的内容以使用post方法发送数据。对于此示例，您需要在使用之前在文件中导入axios。

_onChange: function (event) {
    axios.post("/",{
        countValue: this.state.count
    }).then((response)=> {
       console.log("Data submitted successfully");
    }).catch((error)=> {
       console.log("got errr while posting data", error);
    });
}});

同时在服务器端，您需要使用ajax调用获取通过post请求发送的数据。

app.post('/', function (req, res) {
   var countValue = req.body.countValue;
   console.log("CountValue is", countValue);
});

你可以使用console.log在服务器控制台上检查计数值。

- deeps