I'm using NodeJS, JSX and ReactJS and I have the next class:
import React from 'react';
export default class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
console.log("QD");
}
handleChange(event) {
console.log("QDWWQD");
this.setState({value: event.target.value});
}
handleSubmit(event) {
console.log('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="submit"/>
</form>
);
}
}
I deleted every input and kept just the submit button. When click it the handleSubmit function is not called and the page is just refreshed.
EDIT:
Here is my server.js routing part:
app.get('*', (req, res) => {
match( { routes, location: req.url }, (err, redirectLocation, renderProps) => {
// in case of error display the error message
if (err) {
return res.status(500).send(err.message);
}
// in case of redirect propagate the redirect to the browser
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
}
// generate the React markup for the current route
let markup;
var bodyClasses;
if (req.session.user === undefined) {
markup = renderToString(<LoginPage/>);
bodyClasses = "login-page";
} else if (renderProps) {
// if the current route matched we have renderProps
markup = renderToString(<RouterContext {...renderProps}/>);
bodyClasses = "sidebar-mini";
} else {
// otherwise we can render a 404 page
markup = renderToString(<NotFoundPage/>);
res.status(404);
}
// render the index template with the embedded React markup
return res.render('index', { markup: markup, bodyClasses: bodyClasses });
});
});
And, if it helps, here is routes.js:
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import Layout from './components/Layout.react';
import IndexPage from './components/IndexPage.react';
import NotFoundPage from "./components/NotFoundPage.react";
import PropertiesPage from "./components/PropertiesPage.react";
const routes = (
<Route path="/" component={Layout}>
<IndexRoute component={IndexPage}/>
<Route path="proprietati" component={PropertiesPage}/>
<Route path="*" component={NotFoundPage}/>
</Route>
);
export default routes;
EDIT2: Here is the index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
</head>
<body class="hold-transition skin-blue <%= bodyClasses %>">
<div id="main"><%- markup %></div>
</body>
</html>
Try to add return false in: