Rust Wasm使用web-sys添加input事件监听器出现所有权移动报错如何解决

问题根因 #

Rust所有权规则要求同一时间一个值只能有一个所有者，你在闭包内部直接使用外部的input变量时，变量所有权会被直接移动到闭包内，导致闭包外部的input变量失效，自然无法继续调用绑定事件的方法。

解法1：通过事件对象直接获取目标元素（更推荐） #

不需要捕获外部的输入元素变量，直接从事件回调的参数中拿到触发事件的元素，从根源避免所有权转移问题，适配HtmlInputElement和HtmlTextAreaElement两种场景：

let closure = Closure::wrap(Box::new(|e: web_sys::InputEvent| {
    // 如果是文本域，把泛型参数换成 web_sys::HtmlTextAreaElement 即可
    let input = e.target()
        .unwrap()
        .dyn_into::<web_sys::HtmlInputElement>()
        .unwrap();
    console_log!("{}", input.value());
}) as Box<dyn FnMut(_)>);

input.add_event_listener_with_callback("input", closure.as_ref().unchecked_ref())?;
// 如果监听器需要页面全生命周期生效，调用forget避免闭包被释放
// 如果后续需要手动解绑，不要调用forget，把closure存到全局变量/结构体中保存即可
closure.forget();

解法2：用Rc共享所有权 #

如果确实需要在闭包内访问外部的元素实例，可以用Rc包裹元素实现所有权共享，仅把克隆的Rc实例移动到闭包内，原变量所有权不会被转移：

use std::rc::Rc;

// 用Rc包裹输入元素，实现所有权共享
let input = Rc::new(input);
// 仅克隆Rc指针给闭包使用，不会转移原变量所有权
let input_clone = Rc::clone(&input);

let closure = Closure::wrap(Box::new(move |_: web_sys::InputEvent| {
    console_log!("{}", input_clone.value());
}) as Box<dyn FnMut(_)>);

// 原input变量所有权未转移，可以正常调用绑定方法
input.add_event_listener_with_callback("input", closure.as_ref().unchecked_ref())?;
closure.forget();

内容的提问来源于stack exchange，提问作者Elias