-1

Boa noite, já procurei em tudo que é forum na internet e não achei nada que solucionasse meu problema. Eu estou estudando React, e estou tentando enviar um form, porém não quero que a página dê reload quando enviar o form, então vou usar o preventDefault(). Porém por algum motivo a função não está funcionando, quando clico no botão o form é enviado normalmente. Segue o código:

function prevent(e) {
    e.preventDefault();
    }

return(
    <>
    <Template>
        <Container>
            <form onSubmit={(e) => prevent(e)}>
                <FormField
                label='Titulo:'
                type='text'
                placeholder='Titulo para a noticia'
                value={values.title}
                name='title'
                onChange={handlerValue}
                />
                <FormField
                label='Link:'
                type='text'
                placeholder='Link para a noticia'
                value={values.link}
                name='link'
                onChange={handlerValue}
                />
                <button className='my-2'>Adicionar</button>
            </form>
            <ul>
                {aux.map((item, indice) => {
                    return(
                        <li key={aux + indice}>
                            {aux}
                        </li>
                    )
                })}
            </ul>
        </Container>
    </Template>
    </>
)

2 Respostas 2

0

Tenta alterar a sua chamada do onSubmit para:

<form onSubmit={prevent}>
3
  • E por que isso faria diferença?
    – Andre
    2/08/2020 às 3:36
  • O que entendo é que por padrão a função criada já recebe o event de onde está sendo chamada.
    – Colasanto
    2/08/2020 às 13:02
  • Na verdade, isso deveria executar de maneira exatamente igual. Essa mudança só evita a criação de uma função anônima desnecessária, mas de maneira alguma muda o comportamento do componente. codesandbox.io/s/bold-glitter-8lxbp?file=/src/App.js 2/08/2020 às 15:07
0

Vamos a um código que fiz:

<div id="root"></div>
const App = () => {
  function stopForm (event) {
    console.log('Chamou o stopForm');
    event.preventDefault();
    console.log('Acabou o stopForm');
  }
  
  return (
    <form onSubmit={stopForm}>
      <input
        type="submit"
        value="Enviar valores"
      />
      <button>
        Enviar valores 2
      </button>
      <button type="button">
        Enviar valores 3
      </button>
    </form>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Criei 3 elementos que são botões, mas apenas 2 tem o mesmo comportamento:

  • <input type="submit" />: Esse cara vai disparar o submit do form;
  • <button>: Esse cara vai disparar o submit do form;
  • <button type="button">: O type padrão do button é submit. Para que isso não ocorra, e você deseje mapear um onClick é só colocar o type="button".

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 .