Estou usando o pacote Unform para criar um formulário no React e possuo a seguinte função que renderiza o formulário:
function FormularioCliente() {
function handleSubmit(data) {
console.log(data);
}
return (
<Form onSubmit={handleSubmit}>
<div className="Nome">
<label>Nome: <Input name="nome" type="name" /></label>
</div>
<div className="Email">
<label>E-mail: <Input name="email" type="email" /></label>
</div>
<div className="Senha">
<label>Senha:<Input name="senha" type="password" /></label>
</div>
<div className="Botoes">
<button type="submit">Login</button>
</div>
<div>
<button type="asdasda">Cadastre-se</button>
</div>
</Form>
)
};
export default FormularioCliente;
O problema é que o método handleSubmit()
é chamado dentro da tag Form
, como tenho mais de um botão lá dentro, todos eles disparam a função e fazem a mesma coisa. Gostaria que cada botão fizesse uma coisa diferente, então mudei um pouco o código para chamar a função diretamente na <div />
que está o botão, e essa <div />
é filha de <Form></Form>
. Ficou assim:
function FormularioCliente() {
function handleSubmit(data) {
console.log(data);
}
return (
<Form>
<div className="Nome">
<label>Nome: <Input name="nome" type="name" /></label>
</div>
<div className="Email">
<label>E-mail: <Input name="email" type="email" /></label>
</div>
<div className="Senha">
<label>Senha:<Input name="senha" type="password" /></label>
</div>
<div onSubmit={handleSubmit} className="Botoes">
<button type="submit">Login</button>
</div>
<div>
<button type="asdasda">Cadastre-se</button>
</div>
</Form>
)
};
export default FormularioCliente;
Mas quando clico no botão recebo a seguinte mensagem de erro do console: TypeError: p is not a function
Por quê o fato de eu chamar a função em uma tag filha inutiliza meu código?