search

yewstack / yew

Rust / Wasm framework for creating reliable and efficient web applications
https://yew.rs
Apache License 2.0
30.84k stars 1.43k forks source link

Interaction of use_state with <form> tag #3676

Closed ArtyomSinyugin closed 3 months ago

ArtyomSinyugin commented 4 months ago

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! {

{ *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:

ranile commented 4 months ago

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

ArtyomSinyugin commented 3 months ago

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.

ranile commented 3 months ago

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