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).