Why can’t I trigger a function in a <div/> daughter tag in React?

Asked

Viewed 41 times

0

I am using the Unform package to create a form in React and have the following function that renders the form:

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;

The problem is that the method handleSubmit() is called inside the tag Form, Since I have more than one button inside, they all trigger the function and do the same thing. I would like each button to do something different, so I changed the code a little to call the function directly on <div /> that’s the button, and that <div /> is the daughter of <Form></Form>. Stayed like this:

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;

But when I click on the button I get the following console error message: TypeError: p is not a function

Why the fact that I call the function in a daughter tag disables my code?

1 answer

0


Here there is no way to install the package Unform, but, from what I noticed that you do not know how to work with forms and buttons contained in <form>. The button of the type submit will submit the forms with the information contained within their <input/>, <select/> etc. and to have another button may not be of the type submit, but, yes, like button (in your specific case).

You need to study , and the basics for then working with a library . My proposal is to show this to you with minimal example:

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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.