Buenos días mi problema es simple, tengo un formulario para poder enviar los datos a un api, la cosa es que en el formulario tengo declarado que cuando haga submit en vez de enviar el formulario entre a un función pero al parecer no funciona y hace el submit igual aunque tengo e.preventDefault();
y no se porque, probablemente es algo simple pero aun así no logro averiguarlo, les dejo el código del componente (borre unas partes para que no fuera tan largo)
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
handleSubmit = e => {
e.preventDefault();
console.log('xd');
};
render() {
const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 8 }}, wrapperCol: { xs: { span: 24 }, sm: { span: 16 }}};
return (
<Form {...formItemLayout} initialValues={{ remember: true }} onSubmit={this.handleSubmit}>
<Form.Item label="Email" name="email" rules={[{ required: true, message: 'Please input your email'}]}>
<Input onChange={this.handleChange}/>
</Form.Item>
<Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
<Input.Password onChange={this.handleChange}/>
</Form.Item>
<Form.Item name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType='submit'> Submit </Button>
</Form.Item>
</Form>
);
}
}
export default Login;
Al hacerle click al boton deberia escribir en la consola un xd
pero no lo hace y termina en enviando el formulario, estoy usando ant-desing no se si es de importancia pero lo aclaro igual, gracias de antemano
onFinish={this.handleSubmit}
que te devolverá los valores del form y hará el prevent default no hace falta que lo hagas tu. ant.design/components/form/#API – hawks el 27 oct. 20 a las 16:03