Function leptos::create_node_ref

source ·
pub fn create_node_ref<T>() -> NodeRef<T>
where T: ElementDescriptor + 'static,
Expand description

Creates a shared reference to a DOM node created while using the view macro to create your UI.

use leptos::html::Input;

#[component]
pub fn MyComponent() -> impl IntoView {
    let input_ref = create_node_ref::<Input>();

    let on_click = move |_| {
        let node =
            input_ref.get().expect("input_ref should be loaded by now");
        // `node` is strongly typed
        // it is dereferenced to an `HtmlInputElement` automatically
        log!("value is {:?}", node.value())
    };

    view! {
      <div>
          // `node_ref` loads the input
          <input _ref=input_ref type="text"/>
          // the button consumes it
          <button on:click=on_click>"Click me"</button>
      </div>
    }
}