0

I'm trying to change checked radio-button on click with my code in Yew.


    let radio_buttons = vec![
        ("monday", "monday1"),
        ("tuesday", "tuesday1"),
        ("wednesday", "wednesday1"),
        ("thursday", "thursday1"),
        ("friday", "friday1"),
    ];

    let checked_radio: std::cell::RefCell<Option<HtmlInputElement>> = std::cell::RefCell::new(None);

    let onclick_radio = Callback::from(move |event: MouseEvent| {
        let target = event.target().unwrap();
        let input = target.unchecked_into::<HtmlInputElement>();
        if let Some(prev_checked) = checked_radio.borrow().as_ref() {
            prev_checked.set_checked(false); // Uncheck the previously checked radio
        }
        
        input.set_checked(true);
        checked_radio.replace(Some(input));

    });


html!{
        <form onsubmit={onsubmit_callback}>
            <div class="row">
                {
                    radio_buttons.iter().map(|values| html! {
                        <>
                            <input type="radio" id={values.0} name={values.0} value={values.0} checked=false onclick={onclick_radio.clone()} />
                            <label for={values.0} style="padding-right:10px; padding-left:5px;">{{values.1}}</label>
                        </>
                    }).collect::<Html>()
                }
            </div>
            <br/>


.....

This works and clicked radio-button is checked and the old one is unchecked.

Now I try to get a value of checked radio-button for my form. I got the value in cloned_user_record_state but I'm not able to add check to the button (Its unchecked at the html front). Why please?

    let user_record = use_state(|| Record::default());
    

    let radio_buttons = vec![
        ("monday", "monday1"),
        ("tuesday", "tuesday1"),
        ("wednesday", "wednesday1"),
        ("thursday", "thursday1"),
        ("friday", "friday1"),
    ];

    let checked_radio: std::cell::RefCell<Option<HtmlInputElement>> = std::cell::RefCell::new(None);

    let cloned_user_record_state = user_record.clone();
    let onclick_radio = Callback::from(move |event: MouseEvent| {
        let target = event.target().unwrap();
        let input = target.unchecked_into::<HtmlInputElement>();
        if let Some(prev_checked) = checked_radio.borrow().as_ref() {
            prev_checked.set_checked(false); // Uncheck the previously checked radio
        }
        
        let mut struct_data = cloned_user_record_state.deref().clone();
        let x = input.value().clone();
        
        input.set_checked(true);
        checked_radio.replace(Some(input));

        struct_data.day = x;
        cloned_user_record_state.set(struct_data);

    });

I try to do this

let x = input.value().clone();
struct_data.day = x;
cloned_user_record_state.set(struct_data);

My Record struct contains the day, I'm able to print it, but, when I click the radio-button values changes inside the code but not at the front (button is unchecked).

Marcel Kopera
  • 179
  • 11

0 Answers0