Giters

yewstack / yew

Rust / Wasm framework for creating reliable and efficient web applications

Home Page:https://yew.rs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Interaction of use_state with <form> tag

ArtyomSinyugin opened this issue · comments

commented

Problem: counter always returns to 0, if the button inside "form" tag (as well as text returns to initial state if it is from input tag)
In my test project use_state does not work correctly with html tag "form"

Steps To Reproduce
I have that code:
html! {

{Search} { *counter } } onclick Event is connected to function component, which is the past-copy of the counter from Docs: https://yew.rs/docs/getting-started/build-a-sample-app

Environment:

  • Yew version: [e.g. v0.21, master]
  • Rust version: [e.g. 1.78.0, stable]
  • Target: [wasm32-unknown-emscripten]
  • Build tool: [trunk]
  • OS, if relevant: [e.g. Windows]
  • Browser: [Chrome]
commented

are you sure the button is not triggering the submit event of the form and causing the page to refresh?

commented

Hello!
Now I am not shure if this is a bug, but it would be nice to include this information into docs...
I've just tested the example from https://yew.rs/docs/getting-started/build-a-sample-app
But use form tag instead of div
form-div-yew
Form tag has it's own default behavior and refreshes page after every click. So the counter will be always be 0.

But if we add just one simple line it works fine:
image

But I couldn't find the information about prevent_default() earlier. So it took me some hours to figured out the problem.

commented

This issue has nothing to do with Yew so I don't see why it should be in Yew's docs. If you had the same code in plain HTML, it wil behave the same way. You'll also experience the same issue as the one described here in React.

I'm going to close this now as this is resolved