javascript - 使用 reactjs 在 POST 后重定向

Question

我已将 express 配置为路由到 redirect，如下所示:

在路由/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 for reference

    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;

希望对您有所帮助。