2016-12-17 12 views
2

と呼ばれていない私はNodeJS、JSXとReactJSを使用していると私は、次のクラスを持っている:ReactJSがonSubmit検証が動作しない形成、それが

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> 
     ); 
    } 
} 

私はすべての入力を削除し、単に送信ボタンを保ちました。これをクリックすると、handleSubmit関数が呼び出されず、ページが更新されます。 EDIT

:ここに は私server.jsルーティング一部です:

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 }); 
}); 
}); 

そして、それは場合に役立ちます、ここ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:

:ここに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> 
+3

本当に?私はJsFiddleで試してみましたが、それはうまくいきました.... http://jsfiddle.net/aasrozqd/ –

+0

問題はどこか他の場所ですか?多分nodejsと? – Mihai

+0

おそらくどこか...コードを提供できますか? –

答えて

-2

戻り値falseに追加してみてください:

handleSubmit(event) { 
    event.preventDefault() 
    console.log('A name was submitted: ' + this.state.value); 
    return false; 
} 
+0

React v14ではfalseを返すことはできません[ここ](https://facebook.github.io/react/docs/events.html) –

関連する問題