Using state in a callback

[w3irdrobot]

I'm learning Dioxus and having a really hard time figuring out how to use state in an async callback. I have tried using all kinds of combinations of syntax while using use_callback!. I'm trying to build this for WASM at the moment. It's possible I'm going about this incorrectly, but any help would be much appreciated. My app looks like the following:

fn app(cx: Scope) -> Element {
    let content: &UseState<String> = use_state(cx, String::new);
    let cb = use_callback!(cx, {
        to_owned![content];
        move |_| async move {
            info!("content: {}", content.current());
        }
    });

    cx.render(rsx! (
        div {
            textarea{
                oninput: |evt| content.set(evt.value.clone()),
                "{content}"
            }
            button{
                onmouseup: cb,
                "Submit"
            }
        }
    ))
}

The errors I get are consistently around the content not being able to be moved out of the FnMut closure. I've been looking at the source code for the use_callback! macro as well as looking at the output using cargo expand.

I've pieced together some stuff from the examples, documentation, and the guide, to no avail. For now, I'm just trying to use info! to output the content of the textarea when I click the submit button. Unfortunately either the docs or examples seem out-of-date or lacking in this specific area, which surprises me because I assume this is a common use-case.

[ealmloff]

You don't need to use the use_callback hook here, you can just use the closure directly:

use dioxus::prelude::*;

fn app(cx: Scope) -> Element {
    let content: &UseState<String> = use_state(cx, String::new);
    let cb = move |_| {
        to_owned![content];
        async move {
            println!("content: {}", content.current());
        }
    };

    cx.render(rsx! (
        div {
            textarea{
                oninput: |evt| content.set(evt.value.clone()),
                "{content}"
            }
            button{
                onmouseup: cb,
                "Submit"
            }
        }
    ))
}

fn main(){}

[w3irdrobot]

ok. so using current() does get me the updated empty string. however, the textarea value does not update to the empty string. that's what i'm attempting to do.

[ealmloff]

I missed this in your original code, but I think using value instead of creating a text node works better:

use dioxus::prelude::*;

fn app(cx: Scope) -> Element {
    let content: &UseState<String> = use_state(cx, String::new);
    let cb = move |_| {
        to_owned![content];
        async move {
            content.set(String::from(""));
            println!("content: {}", content.current());
        }
    };

    cx.render(rsx! (
        div {
            textarea{
                value: "{content}",
                oninput: |evt| content.set(evt.value.clone()),
            }
            button{
                onmouseup: cb,
                "Submit"
            }
        }
    ))
}

fn main(){
    dioxus_desktop::launch(app);
}

[w3irdrobot]

interesting. so this appears to work. there a reason for this? is there a suggested way of knowing whether to make a text node or use the value attribute?

[ealmloff]

It is just inherited from how the web platform works: https://www.w3schools.com/jsref/prop_textarea_value.asp

I'm not sure within the specification if there is any specific reason but it is consistent with how html inputs work.

[w3irdrobot]

oh very cool. i did not know that. well thank you for the help!