Why does a react onClick event append a question mark to my url?

Question

For some reason my onClick handlers are adding an empty query param to my url when I click them. I was able to fix the issue by adding event.preventDefault to my event handlers

Answer 1

The default type of a button tag is submit which means clicking the button will submit your form (appending the ? to your url).

To fix your example, you can add type="button" to your buttons &/or replace your

with a

/ (since your code doesn't really seem to need the form element).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Possible values are:

• submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is
  dynamically changed to an empty or invalid value.
• reset: The button resets all the controls to their initial values.
• button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...