React - Preventing Form Submission

Question

I ve been experimenting with React  In my experiement  I m using the Reactstrap framework When I click a button  I ve noticed that the HTML form submits  Is there a way to prevent form submission when a button is clicked    I ve recreated my issue here  My form is pretty basic and looks like this    lt Form gt     lt h3 gt Buttons lt  h3 gt      lt p gt       lt Button color  primary  onClick  this onTestClick  gt primary lt  Button gt  amp nbsp     lt  p gt   lt  Form gt    What am I missing

User · Answer

No JS needed really     Just add a type attribute to the button with a value of button   lt Button type  button  color  primary  onClick  this onTestClick  gt primary lt  Button gt  amp nbsp    By default  button elements are of the type  submit  which causes them to submit their enclosing form element  if any    Changing the type to  button  prevents that

User · Answer

Make sure you put the onSubmit attribute on the form not the button in case you have a from    lt form onSubmit  e   gt  e preventDefault    gt       lt button onClick  this handleClick  gt Click Me lt  button gt   lt  form gt    Make sure to change the button onClick attribute to your custom function

User · Answer

preventDefault is what you re looking for  To just block the button from submitting   lt Button onClick  this onClickButton        code  onClickButton  event      event preventDefault        If you have a form which you want to handle in a custom way you can capture a higher level event onSubmit which will also stop that button from submitting    lt form onSubmit  this onSubmit  gt    and above in code  onSubmit  event      event preventDefault          custom form handling here

User · Answer

import React    Component   from  react    export class Form extends Component     constructor props        super        this state           username                   handleUsername    event    gt        this setState         username  event target value                  submited    event    gt        alert  Username    this state username          event preventDefault           render         return          lt div gt           lt form onSubmit  this submited  gt             lt label gt Username  lt  label gt             lt input             type  quot text quot              value  this state username              onChange  this handleUsername              gt             lt button gt Submit lt  button gt           lt  form gt         lt  div gt                export default Form

User · Answer

In your onTestClick function  pass in the event argument and call preventDefault   on it   function onTestClick e        e preventDefault

User · Answer

You have prevent the default action of the event and return false from the function   function onTestClick e        e preventDefault        return false

User · Answer

There s another  more accessible solution  Don t put the action on your buttons  There s a lot of functionality built into forms already  Instead of handling button presses  handle form submissions and resets  Simply add onSubmit  handleSubmit  and onReset  handleReset  to your form elements   To stop the actual submission just include event in your function and an event preventDefault    to stop the default submission behavior  Now your form behaves correctly from an accessibility standpoint and you re handling any form of submission the user might take

User · Answer

componentDidUpdate                           wpcf7-submit   click  function event            event preventDefault               You can use componentDidUpdate and event preventDefault   to disable form submission As react does not support return false

User · Answer

I think it s first worth noting that without javascript  plain html   the form element submits when clicking either the  lt input type  submit  value  submit form  gt  or  lt button gt submits form too lt  button gt   In javascript you can prevent that by using an event handler and calling e preventDefault   on button click  or form submit  e is the event object passed into the event handler  With react  the two relevant event handlers are available via the form as onSubmit  and the other on the button via onClick    Example  http   jsbin com vowuley edit html js console output

User · Answer

function onTestClick evt      evt stopPropagation

User · Answer

2 ways  First one we pass the event in the argument right into the onClick     onTestClick e        e preventDefault        alert  here                 Look here we pass the args in the onClick    lt Button color  primary  onClick  e   gt  this onTestClick e   gt primary lt  Button gt  amp nbsp      Second one we pass it into argument and we did right in the onClick    onTestClick         alert  here                 Here we did right inside the onClick  but this is the best way    lt Button color  primary  onClick  e   gt   e preventDefault    this onTestClick     gt primary lt  Button gt  amp nbsp    Hope that can help

[javascript] React - Preventing Form Submission

Examples related to javascript

Examples related to reactjs