表单处理

文本输入

let username: Signal<String> = use_signal(|| "".to_string());
let username_updater: Signal<String> = username;

rsx! {
    input {
        r#type: "text"
        placeholder: "Enter username"
        value: username
        oninput: move |event: NativeEvent| {
            if let NativeEvent::Input(input_event) = event {
                username_updater.set(input_event.get_value().clone());
            }
        }
    }
}

复选框

let agree: Signal<bool> = use_signal(|| true);
let agree_updater: Signal<bool> = agree;

rsx! {
    input {
        r#type: "checkbox"
        checked: agree
        onchange: move |event: NativeEvent| {
            if let NativeEvent::Change(change_event) = event {
                agree_updater.set(*change_event.get_checked());
            }
        }
    }
    label { "I agree to the terms" }
}

提示

复选框必须使用 onchange 而非 oninput 监听变化。

表单验证

let errors: Signal<String> = use_signal(|| "".to_string());
let submitted: Signal<String> = use_signal(|| "".to_string());

button {
    onclick: move |_event: NativeEvent| {
        let mut validation_errors: Vec<String> = Vec::new();
        if username.get().trim().is_empty() {
            validation_errors.push("Username is required".to_string());
        }
        if email.get().trim().is_empty() {
            validation_errors.push("Email is required".to_string());
        }
        if validation_errors.is_empty() {
            errors.set("".to_string());
            submitted.set(format!("Submitted: {}", username.get()));
        } else {
            errors.set(validation_errors.join("; "));
        }
    }
    "Submit"
}

注意

onsubmit 事件中需要自行阻止默认提交行为，否则页面会刷新。

加载中...