How do i control the node?

[callmeitachi]

I have the following code:

use dioxus::prelude::*;
use web_sys::{Document,Window,Node,Element};
pub fn Upload() -> Element {
    let window=web_sys::window().unwrap();
    let document=window.document().unwrap();
    let btn=document.get_element_by_id("inputsubmit").unwrap();
    rsx! {
        form {
            method: "post",
            action: "http://127.0.0.1:5000/upload",
            enctype: "multipart/form-data",
            input {
                multiple: "false",
                r#type: "file",
                accept: "image/png,image/jpeg,image/jpg",
                id: "inputfile",
                name:"file",
            },
            button {
                r#type: "submit",
                style: "display: none;",
                id: "inputsubmit",
                "submit"
            },
        }
    }
}

I like Dioxus so much,but i think it was more difficult to control the node than other frameworks.when i using the web_sys crates,it's some errors will be happened.And how do i get the Node?
it can't "let node1:Node=btn.into()"?

[ealmloff]

Running that code in the body of the component can cause issues because it will try to get the element by id before it is rendered. You can use the onmounted event instead which runs when the element is mounted:

use dioxus::prelude::*;
use dioxus::web::WebEventExt;
pub fn Upload() -> Element {
    rsx! {
        form {
            method: "post",
            action: "http://127.0.0.1:5000/upload",
            enctype: "multipart/form-data",
            input {
                multiple: "false",
                r#type: "file",
                accept: "image/png,image/jpeg,image/jpg",
                id: "inputfile",
                name:"file",
            },
            button {
                r#type: "submit",
                style: "display: none;",
                id: "inputsubmit",
                onmounted: |evt| {
                    let element: Element = evt.web_event();
                    // Do stuff with element or store it in a hook to use later
                },
                "submit"
            },
        }
    }
}

[callmeitachi]

I expected that the Document about Dioxus can be even easier and clearer.

[photino]

Why can't we find dioxus::web::WebEventExt on docs.rs/dioxus?