How to use onmounted ? help ...

[meager quarry]

Hi, I'm trying to hide the input and call it from a button. I was looking for a ref alternative and someone said something about using onmount, is this right ?

use dioxus::prelude::*;
use std::rc::Rc;

#[component]
pub fn Settings() -> Element {
    let mut path: Signal<String> = use_signal(|| "".to_string());
    let mut input_ref: Signal<Option<Rc<MountedData>>> = use_signal(|| None);

    let file_select = move |_| {
        if let Some(input_data) = input_ref() {
            if let Ok(input) = Rc::try_unwrap(input_data) {
                // how do I call it ?
            }
        }
    };

    rsx! {
        div { class: "h-screen w-full bg-green-200 ",
            p { "Selected Path: {path}" }
            p { class: "bg-red-200", "Settings" }
            button { onclick: file_select, "input-file" }
            input {
                id: "music-path-save",
                name: "music-path",
                r#type: "file",
                hidden: true,
                directory: true,
                onmounted: move |element| input_ref.set(Some(element.data())),
                onchange: move |evt| {
                    if let Some(file_engine) = evt.files() {
                        if let Some(dir_path) = file_engine.files().first() {
                            path.set(dir_path.clone());
                        }
                    }
                    println!("{:?}", path);
                },
            }
        }
    }
}

Im on 0.6.2

[meager quarry]

How to use onmounted ?

[tropic sinew]

Yes, that looks right. If you are using dioxus-web you can downcast the mounted data to the web-sys element with .as_web_event()

[meager quarry]

@tropic sinew thanks for replying. What do I do after that , just looking at the Types as_web_event returns a web_sys::Element then what 😅. Also I think the Rc::try_unwrap(input_data) is never successful.

[meager quarry]

How to use onmounted ? help ...

What Im basically trying to do is to get the path of some dir that the user picks. if there is a better way to do this that works too. on button press.

[tropic sinew]

The web-sys crate doesn't have many examples, but all of the functions/types come directly from javascript