使用reactjs在POST后重定向

Question

我已快速配置路由到redirect如下：

在routes / redirect.js中：

var express = require('express');
var router = express.Router();
router.post('/', function(req, res, next) {
    res.send('received POST data: ' + req.body.data); 
});
module.exports = router;

在app.js中：

...
var redirect = require('./routes/redirect');
var app = express();
...
app.use('/redirect', redirect);

並在component.jsx中：

var React = require('react');
var Component = React.createClass({
    render: function(){
            return (
                <form>
                    <input type="text" ref="data" placeholder="Send some data"/>
                    <button onClick={this.handleSubmit}>Send</button>
                </form>
            );
        },

     handleSubmit: function() {
            var data = this.refs.data.getDOMNode().value;
            // TODO: how do I send 'data' as POST request and redirect to /redirect ?
            // i.e. POST and redirect to localhost:3000/redirect like in a classic 
            // form submit{action='redirect',method='post'} way 
        }
});

module.exports=Component;

我在代碼的TODO部分中包含了我的問題描述。 有沒有辦法完全使用Node + React而不安裝所有類型的插件？

Answer 1

您可以使用大多數現代瀏覽器支持的fetch API。 請參閱MDN以供參考

    var Component = React.createClass({
        render: function(){
                return (
                    <form>
                        <input type="text" ref="data" placeholder="Send some data"/>
                        <button onClick={this.handleSubmit}>Send</button>
                    </form>
                );
            },

         handleSubmit: function(e) {
                e.preventDefault();
                var data = this.refs.data.getDOMNode().value;
                fetch("<url to where to post>", {
                    method: "POST",
                    body: 'data'
                }).then(this.handleRedirect)                    
            },

        handleRedirect: function(res){
            if( res.status === 200 ){
                // redirect here
                // window.location.href = 'http://localhost:300/redirect';
            }else {
              // Something went wrong here
            }

        }
    });


    module.exports=Component;

希望能幫助到你。