Okay so I have Login.js & Signup.js components on the Login component, the onFinish event works perfectly where as on Signup the onFinish doesn't work at at all -- even not a console.log()
Login.js (username, password):
import React from 'react';
import { LockTwoTone,UserOutlined,LoadingOutlined } from '@ant-design/icons';
import { Form, Input, Button, Spin } from 'antd';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as actions from '../store/actions/auth';
const FormItem = Form.Item;
const antIcon = <LoadingOutlined type="loading" style={{ fontSize: 24 }} spin />;
class NormalLoginForm extends React.Component {
handleSubmit = (e) => {
console.log("i am getting printed");
}
render() {
let errorMessage = null;
if (this.props.error) {
errorMessage = (
<p>{this.props.error.message}</p>
);
}
return (
<div>
{errorMessage}
{
this.props.loading ?
<Spin indicator={antIcon} />
:
<Form onFinish={this.handleSubmit} className="login-form col-xs-8">
<FormItem name="username" rules={[{ required: true, message: 'Please input your Username!' }]}>
<Input prefix={<UserOutlined type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</FormItem>
<FormItem name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
<Input prefix={<LockTwoTone type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
Login
</Button>
</FormItem>
</Form>
}
</div>
);
}
}
const mapStateToProps = (state) => {
return {
loading: state.loading,
error: state.error
}
}
const mapDispatchToProps = dispatch => {
return {
onAuth: (username, password) =>
dispatch(actions.authLogin(username, password))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NormalLoginForm);
SignUp.js (username, email, password, confirm-password):
import React from 'react';
import { MailTwoTone,LockTwoTone,UserOutlined,LoadingOutlined } from
'@ant-design/icons';
import { Form, Input, Button } from 'antd';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as actions from '../store/actions/auth';
const FormItem = Form.Item;
class RegistrationForm extends React.Component {
state = {
confirmDirty: false,
};
handleSubmit = (values) => {
console.log("doesnt print me");
}
handleConfirmBlur = (e) => {
const value = e.target.value;
this.setState({ confirmDirty: this.state.confirmDirty ||
!!value });
}
validateToNextPassword = (values, pass,item3) => {
return true; // for simplicity
}
render() {
return (
<div>
<Form onFinish={this.handleSubmit} className="sign-up-form">
<FormItem name="username" rules={[{ required: true, message: 'Please input your Username!' }]}>
<Input prefix={<UserOutlined type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</FormItem>
<FormItem name="email" rules={[{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}]}>
<Input prefix={<MailTwoTone type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" />
</FormItem>
<FormItem name="password" rules={[{
required: true, message: 'Please input your Password!',
},{
validator: this.validateToNextPassword,
}]}>
<Input prefix={<LockTwoTone type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
</FormItem>
<FormItem name="confirm" rules={[ {
required: true, message: 'Please confirm your password!',
},({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('password does not match!');
},
}),
]}>
<Input prefix={<LockTwoTone type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Confirm Password" onBlur={this.handleConfirmBlur} />
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
Sign Up
</Button>
</FormItem>
</Form>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
loading: state.loading,
error: state.error
}
}
const mapDispatchToProps = dispatch => {
return {
onAuth: (username, email, password1, password2) =>
dispatch(actions.authSignup(username, email, password1, password2))
}
}
export default connect(mapStateToProps, mapDispatchToProps)
(RegistrationForm);
It is pretty much the same form that triggers the same function but it doesn't work on Signup.js I checked everything possible... what could be the reason?