Reputation: 119

react onSubmit not working using react + express

My onSubmit function is not working with a website I made using a bootstrap template, specifically this one https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697. It just refreshes the page, deleting whatever is in there. I have tried all combinations of the following:

Replacing onSubmit with onSuccess.
Moving my function inside the render before the return statement.
Adding parentheses to the handleSubmit function within the
Replacing e.preventDefault() with e.stopPropagation()

I am using nodejs, express and react, and am new to all 3.

I find it worth mentioning that I do not require('react-dom') nor use ReactDOM anywhere, which is weird to me because I always used it when I did the tutorials to learn react.

I believe I have read every similar problem on stack overflow, but nothing seems to be working. Here are my files in the order in which they are executed

app.js

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

routes/index.js file

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

Upvotes: 0

Answers (3)

Bradley Kovacs

Reputation: 119

I am attempting to answer my own question here because it was too long for a comment. But regarding your suggestion to put my HTML in it's own file... My view engine is setup for jsx files. I am going to try what you did by doing this: npm install consolidate npm install swig

In app.js I will put:

var cons = require('consolidate');

at the top. Then for my view engine setup I will configure it like:

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

So now how do I setup my routes/index.js file? I'm guessing it should be something like:

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

So now I will have to create views/index.html (rather than views/index.jsx like before). I inserted the HTML from your JSfiddle into the index.html file, but where do I put the code containing the LoginForm and ReactDOM stuff? I think I would be able to create a file in public/js/welcome-page.jsx and then include it at the bottom, but then other people can see my react code and onSubmit function, which is insecure right?

Upvotes: 0