React + Ant 设计登录表单 e.preventDefault 不是 function

Question

我一直在尝试使用 Ant Desing forms 来实现登录页面功能。

我不断收到以下错误

我尝试检查所有分号，看看这是否是由于缺少分号，但无法找到根本原因。

TypeError: e.preventDefault is not a function
at onSubmit (LoginForm.js:27) 
at onFinish (LoginForm.js:44)
at onFinish (Form.js:73)
at useForm.js:811 

这是我的登录页面代码。

import React, {useState} from 'react';
import {Link, Redirect} from 'react-router-dom';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import styles from './NormalLoginForm.css';
import { Form, Input, Button, Checkbox, Layout, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {login} from '../auth/actions/auth';

const NormalLoginForm = ({ login, isAuthenticated }) => {

    const [formData, setFormData] = useState({
        username: '',
        password:''
    });
    const { username, password} = formData;

    const onChange = e => setFormData({...formData, [e.target.name]: e.target.value});

    const onFinish = (values) => {

        console.log('Received values of form  onFinish: ', values);
        // login(username,password)
    };

    const onSubmit = e => {
        e.preventDefault();

        console.log('Received values of form(onSumbit):' );

        login(username,password);
    };

    if (isAuthenticated)
        return <Redirect to='/' />;

    return (
        <Form
            name="normal_login"
            className="login-form"
            initialValues={{
                remember: true,
            }}
            onFinish={e=> onSubmit(e)}

            style={{ maxWidth: 300, align: 'center'}}
        >
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Username!',
                    },
                ]}
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />}
                       placeholder="Username"
                        onChange={e=> onChange(e)}
                />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Password!',
                    },
                ]}
            >
                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                    onChange={e => onChange(e)}
                />
            </Form.Item>
            <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <a className="login-form-forgot" href="">
                    Forgot password
                </a>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                    Log in
                </Button>
                {/*Or <a href="">register now!</a>*/}
            </Form.Item>
        </Form>
    );
};

NormalLoginForm.propTypes = {
    login: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool
};

const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
});

connect(mapStateToProps, { login })(NormalLoginForm);


function LoginForm () {
    return (
        <NormalLoginForm/>
    )
}

export default LoginForm; 

我在哪里犯错？ 这是我在 React 中的第一个项目，被困在这里好几个星期了。 请帮忙。

Answer 1

如果要在提交表单时调用preventDefault ，请改用onSubmit处理程序。 onFinish的参数不是事件，而是值。

onSubmit={e => e.preventDefault()}
onFinish={onFinish}

const onFinish = (values) => { // you can remove this parameter if you don't use it
  login(username, password);
};