How to handle form submission / async events / closures

[seanpmyers]

Hello,

I'm trying to implement a basic form, but I wasn't sure the best way to handle the submission since it's async.
Here is what I have so far (doesn't work at the moment):

#[component]
pub async fn RegistrationForm<G: Html>(context: Scope<'_>) -> View<G> {
    let email_address: &Signal<String> = create_signal(context, String::new());
    let password: &Signal<String> = create_signal(context, String::new());

    let submit_registration = |_| async move {
        if email_address.get().is_empty() || password.get().is_empty() {
            return;
        }
        let response = register_user(
            email_address.get().as_ref().clone(),
            password.get().as_ref().clone(),
        )
        .await
        .unwrap_or_default();
    };

    view! { context,
            form {
                div {
                    label {"Email Address"}
                    input(placeholder="example@email.com", type="text", bind=email_address.clone())
                }
                div {
                    label {"Password"}
                    input(placeholder="", type="password", bind=password.clone())
                }
                div {
                    button(type="submit", on:submit=submit_registration)
                }
        }
    }
}

Any input would be appreciated.

Thanks!

[lukechu10]

You can't create async event handlers yet. This is planned but for now, you need to use spawn_local_scoped from inside a normal event handler.

    let submit_registration = |_| spawn_local_scoped(context, async move {
        if email_address.get().is_empty() || password.get().is_empty() {
            return;
        }
        let response = register_user(
            email_address.get().as_ref().clone(),
            password.get().as_ref().clone(),
        )
        .await
        .unwrap_or_default();
    });

Make sure you enable "suspense" feature on sycamore.

[seanpmyers]

Awesome, thank you Luke!

[joeyame]

This answer is outdated for the Reactivity V3 update, including async closure support. Here is a minimum working example component for logging in that took too long to figure out (because I'm dumb). Hopefully if anyone else is as slow as me, this will help:

use reqwasm::http::Request;
use serde_json::json;
use sycamore::suspense::Suspense;
use sycamore::prelude::*;

async fn submit_login(username: String, password: String) {
    let resp = Request::post("/api/users/login")
        .body(
            json!({
                "email": username,
                "password": password
            })
            .to_string(),
        )
        .header("Content-Type", "application/json")
        .send()
        .await
        .unwrap();
}

#[component]
async fn Login<G: Html>() -> View<G> {
    let name_sig = create_signal(String::new());
    let password_sig = create_signal(String::new());
    view! {
        div {
            h2 { "Login" }
            input(placeholder="Email", bind:value=name_sig)
            input(placeholder="Password", type="password", bind:value=password_sig)
            button(on:click=move |_| async move {
                submit_login(name_sig.get_clone(), password_sig.get_clone()).await;
            }) { "Login" }
        }
    }
}

#[component]
fn App<G: Html>() -> View<G> {
    view! {
        div(class="dark:bg-gray-900 dark:text-white flex flex-col items-center justify-center min-h-screen") {
            Suspense(fallback=view! { "Loading..." }) {
                Login {}
            }
        }
    }
}

fn main() {
    sycamore::render(App)
}

What got me was the move |_| async move. Seems absurd to me that you have to use move twice but that's probably nothing to do with this framework.