将数据从React发送到节点服务器，并将结果发送到React

如何将数据从React发送到节点服务器，并将结果发送到React。我对表单有反应，并且有一些数据，我想把这个数据发送给节点服务器，改变这个数据并返回结果反应。将数据从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);

来源

2016-01-23 Pavel Chukhnov

让你_onChange方法调用Ajax。根据服务器的响应，在成功回调中调用setState({...})。

来源

2016-01-23 02:30:54

感谢检查服务器控制台上的计数值，它的工作！ –

@PavelChukhnov肯定的事情。一旦你开始制作更复杂的React应用程序，可以看看Flux/Redux，这将使处理'状态'更容易处理。如果它解决了你的问题，请随时接受答案。 –

可以使用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

来源

2017-05-10 06:52:27 deeps

将数据从React发送到节点服务器，并将结果发送到React

回答

相关问题