Struct leptos_dom::NodeRef

pub struct NodeRef<T: ElementDescriptor + 'static>(/* private fields */);

Contains 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>
    }
}

Implementations

impl<T: ElementDescriptor + 'static> NodeRef<T>

pub fn new() -> Self

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

This is identical to create_node_ref.

use leptos::html::Input;

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

    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>
    }
}

pub fn get(&self) -> Option<HtmlElement<T>>

where T: Clone,

Gets the element that is currently stored in the reference.

This tracks reactively, so that node references can be used in effects. Initially, the value will be None, but once it is loaded the effect will rerun and its value will be Some(Element).

pub fn get_untracked(&self) -> Option<HtmlElement<T>>

where T: Clone,

Gets the element that is currently stored in the reference.

This does not track reactively.

pub fn on_load<F>(self, f: F)

where T: Clone, F: FnOnce(HtmlElement<T>) + 'static,

Runs the provided closure when the NodeRef has been connected with it’s HtmlElement.

Trait Implementations

impl<T: ElementDescriptor> Clone for NodeRef<T>

fn clone(&self) -> Self

Returns a copy of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<T: ElementDescriptor + 'static> Default for NodeRef<T>

fn default() -> Self

Returns the “default value” for a type.

impl<T: ElementDescriptor + 'static> Copy for NodeRef<T>