Question

我正在使用NodeJS，JSX和ReactJS，我有下一堂课：

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函数，只刷新页面。

编辑：这是我的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>

Answer 1

尝试在：

中添加return false

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

ReactJS表单onSubmit不起作用，它没有被调用

1 个答案: