將數據從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

回答

相關問題