登录页面支持回车键提交表单

将 on_submit 改为 Callback::new,在用户名和密码输入框上监听
onkeydown 事件,按下 Enter 键时触发登录提交。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xfy 2026-05-26 23:45:24 +08:00
parent f3204e108b
commit e358f2af7d

View File

@ -11,7 +11,7 @@ pub fn LoginPage() -> Element {
let mut password = use_signal(|| "".to_string());
let mut error = use_signal(|| None::<String>);
let on_submit = move |_| {
let on_submit = Callback::new(move |_| {
error.set(None);
let username_val = username();
@ -60,7 +60,7 @@ pub fn LoginPage() -> Element {
}
}
});
};
});
rsx! {
div { class: "min-h-screen flex items-center justify-center bg-white dark:bg-[#1d1e20]",
@ -86,6 +86,7 @@ pub fn LoginPage() -> Element {
placeholder: "用户名或邮箱",
value: username(),
oninput: move |e| username.set(e.value()),
onkeydown: move |e| if e.key() == Key::Enter { on_submit(()) },
}
}
div {
@ -98,11 +99,12 @@ pub fn LoginPage() -> Element {
placeholder: "密码",
value: password(),
oninput: move |e| password.set(e.value()),
onkeydown: move |e| if e.key() == Key::Enter { on_submit(()) },
}
}
button {
class: "w-full py-2 px-4 bg-gray-900 dark:bg-[#dadadb] text-white dark:text-gray-900 font-medium rounded-full hover:opacity-80 transition-opacity",
onclick: on_submit,
onclick: move |_| on_submit(()),
"登录"
}
a {