Question

我的onSubmit功能无法使用我使用引导程序模板制作的网站，特别是这个https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697。它只刷新页面，删除那里的内容。我尝试了以下所有组合：

用onSuccess替换onSubmit。
在return语句之前在render中移动我的函数。
将括号添加到的handleSubmit函数中
用e.stopPropagation（）取代e.preventDefault（）

我正在使用nodejs，表达和反应，并且对所有人来说都是新手。

我觉得值得一提我不需要（'react-dom'）也不在任何地方使用ReactDOM，这对我来说很奇怪，因为我在做教程时总是用它来学习反应

我相信我已经阅读了堆栈溢出中的每个类似问题，但似乎没有任何工作。以下是我们按其执行顺序的文件

app.js

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

routes / index.js文件

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index');
});
module.exports = router;

views / index.fsx jsx

var React = require('react');

var LoginForm = React.createClass({
getInitialState: function() {
    return {username: '', password: ''};
},
handleUsernameChange: function(e) {
    this.setState({username: e.target.value});
},
handlePasswordChange: function(e) {
    this.setState({password: e.target.value});
},
handleSubmit: function(e) {
    e.preventDefault();

},
success : function () {
    alert('Success');
},
fail : function () {
    alert('Fail');
},
render: function() {
    return (
        <form onSubmit={this.handleSubmit} className="loginForm">
            <div className="input-group">
                <input type="text" className="form-control" placeholder="Username" value={this.state.username} onChange={this.handleUsernameChange} required autofocus />
                <input type="password" className="form-control" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} required />
                <button type="submit" className="btn-u btn-u-lg col-xs-12 col-sm-offset-5 col-md-offset-1 col-lg-offset-2">
                    Sign in <i className="fa fa-sign-in" />
                </button>
            </div>
        </form>
    );
}
});
var Welcome = React.createClass({
render: function() {
    return (
        <html>
        <head>
            <link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin' />

            <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css" />
            <link rel="stylesheet" href="assets/css/style.css" />

            <link rel="stylesheet" href="assets/css/headers/header-default.css" />
            <link rel="stylesheet" href="assets/css/footers/footer-v1.css" />

            <link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css" />
            <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css" />
            <link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css" />
            <link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/custom/custom-sky-forms.css" />

            <link rel="stylesheet" href="assets/css/pages/page_search.css" />

            <link rel="stylesheet" href="assets/css/theme-colors/teal.css" id="style_color" />
            <link rel="stylesheet" href="assets/css/theme-skins/dark.css" />

            <link rel="stylesheet" href="assets/css/custom.css" />
            <link rel="stylesheet" href="assets/css/homepage-style.css" />
        </head>
        <body>
        <div>
            <LoginForm />
        </div>
            <script type="text/javascript" src="assets/plugins/jquery/jquery.min.js" />
            <script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js" />
            <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js" />
            <script type="text/javascript" src="assets/plugins/back-to-top.js" />
        </body>
        </html>
    );
}
});

module.exports = WelcomePage;  // I'm not entirely sure what module.exports does

Answer 1

您需要使用e.stopPropagation();更改e.preventDefault();这将停止页面刷新。

此外，

stopPropagation阻止事件冒泡事件链。

preventDefault会阻止浏览器对该事件执行的默认操作。

将html代码移动到单独的文件中，并像我为您创建的jsfiddle示例一样呈现您的应用。 https://jsfiddle.net/antony_z/7jLqxm2p/

Answer 2

也许尝试将.bind(this)添加到this.handleSubmit，以获得this.handleSubmit.bind(this)

保持：

的onSubmit
e.preventDefault（）

Answer 3

我试图在这里回答我自己的问题，因为评论太长了。但关于你的建议，把我的HTML放在自己的文件中...... 我的视图引擎是为jsx文件设置的。我将通过这样做尝试你做了什么： npm安装整合 npm install swig

在app.js中我会说：

var cons = require('consolidate');

在顶部。然后，对于我的视图引擎设置，我将其配置为：

app.engine('html', cons.swig);
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'html');

那么现在如何设置我的routes / index.js文件？我猜它应该是这样的：

var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
    res.render('index');
});

所以现在我将不得不创建views / index.html（而不是之前的views / index.jsx）。我将您的JSfiddle中的HTML插入到index.html文件中，但是我在哪里放置包含LoginForm和ReactDOM的代码？我想我可以在public / js / welcome-page.jsx中创建一个文件，然后将其包含在底部，但是其他人可以看到我的反应代码和onSubmit函数，这是不安全的吗？

响应onSubmit无法使用react + express

3 个答案: