Rust Yew输入值无法在浏览器渲染，求排查解决

核心错误点 #

你的代码有两个关键问题导致渲染失败：

1. 状态类型选择错误 #

你用use_state(|| "")创建的是UseStateHandle<&str>，但：

• UseStateHandle<T>本身没有实现Display trait，无法直接在html!宏中渲染
• &str是引用类型，Yew状态更适合持有拥有所有权的数据（比如String），避免生命周期和 trait 实现问题

2. 输入回调逻辑错误 #

当前的oninput回调里，你在处理InputEvent后返回了一个新闭包，这根本不会触发状态更新——Yew的Callback期望的是接收到事件后直接执行逻辑，而不是返回另一个闭包。

修复后的完整代码 #

use wasm_bindgen::{JsCast, UnwrapThrowExt};
use web_sys::HtmlInputElement;
use yew::prelude::*;

#[function_component]
fn App() -> Html {
    // 把状态改成拥有所有权的String，初始化为空字符串
    let name = use_state(|| String::new());
    
    let oninput = Callback::from(move |input_event: InputEvent| {
        let name = name.clone();
        let target: HtmlInputElement = input_event
            .target()
            .unwrap_throw()
            .dyn_into()
            .unwrap_throw();
        
        // 直接更新状态，不需要返回闭包
        name.set(target.value());
    });

    html! {
        <div>
            <input {oninput} />
            // 解引用UseStateHandle拿到内部的String，直接渲染
            <p>{"name: "}<h5>{*name}</h5></p>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

关键修复细节 #

• 状态类型调整：将&str改为String，String实现了Display，解引用UseStateHandle<String>后可以直接在html!宏中渲染
• 回调逻辑修正：移除多余的闭包返回，直接在事件处理逻辑中调用name.set(target.value())，确保输入事件触发时立即更新状态
• 渲染方式：用{*name}解引用状态句柄，获取内部的String值进行渲染

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