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

【问题标题】：ReactJS form onSubmit doesn't work, it's not calledReactJS 表单 onSubmit 不起作用，它没有被调用
【发布时间】：2017-05-03 04:42:30
【问题描述】：

我正在使用 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>

【问题讨论】：

真的吗？我在 JsFiddle 中试过，效果很好....jsfiddle.net/aasrozqd
所以问题出在其他地方？也许用 nodejs？
可能在其他地方...你能提供代码吗？
添加了更多信息
您可以检查您的浏览器开发工具是否有错误，如果脚本已加载，只需使用您的浏览器检查器。

标签： javascript node.js reactjs jsx

【解决方案1】：

尝试在中添加return false：

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

【讨论】：

从 React v14 返回 false 不起作用here