0

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?

1 Resposta 1

0

Aqui não tem como instalar o pacote Unform, mas, pelo que percebi que você não sabe trabalhar com formulários e botões contidos em <form>. O botão do tipo submit vai submeter o formulários com as informações contidos dentro dos seus <input/>, <select/> etc. e para ter outro botão não pode ser do tipo submit, mas, sim do tipo button (no seu caso especifico).

Precisa estudar , e o básico para depois trabalhar coma um biblioteca . Minha proposta é mostrar isso pra você com exemplo minimo:

function Form({children, onSubmit}) {
  return (
    <div>
      <h1>Formulário</h1>
      <form onSubmit={onSubmit}>{children}</form>
    </div>
  )
}
function Cadastro({handleToogle}) {
  return (
    <div>
      <h1>Cadastro</h1>
      <button onClick={handleToogle}>Voltar</button>
    </div>
  )
}
function App() {
  const [status, setStatus] = React.useState(false);
  const [nome, setNome] = React.useState('');
  const handleOnSubmit = (e) => {
    e.preventDefault();
    alert(nome);
  }
  const handleToogle = () => setStatus(status => !status);
  if (status) {
    return <Cadastro handleToogle={handleToogle} />
  }
  return (
    <Form onSubmit={handleOnSubmit}>
      <div>
        Nome: <input type="text" value={nome} onChange={e => setNome(e.target.value)} />
      </div>
      <div style={{marginTop:10}}>
        <button type="submit">Enviar</button>{' '} 
        <button type="button" onClick={handleToogle}>Cadastro</button>
      </div>
    </Form>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .