React 组件上的单选按钮需要额外点击才能被标记

Question

I have a very simple react functional component, with a div with some inputs of type radio. Just like this:

const radioHandler = (event) => {
   event.preventDefault();
   console.log(event.target.value);
}

return(
   <div className="radioDiv" onChange={radioHandler}>
      <label>My label:</label>
      <input type="radio" value="1" name="group_x" checked/> One
      <input type="radio" value="2" name="group_x"/> Two
      <input type="radio" value="3" name="group_x"/> Three
   </div>
);

Looks very simple, like this:

What happens is, the option number 1 is checked by default, as desired. But when I click the others, it takes an extra click to actually change to the one I'm trying to check. I've added an ´´´preventDefault()´´´ method because without it, I would click option 2, and then option 3, and it would jump to the default checked one, and not the 3. But with the preventDefault it takes an extra click to make the blue dot actually go to the desired option. Why is this? How can I make it work properly?

Answer 1

Hope this helps: basically remove the preventDefault behaviour and defaultChecked instead of checked.

import "./styles.css";

export default function App() {
  const radioHandler = (event) => {
    console.log(event.target.value);
  };

  return (
    <div className="radioDiv" onChange={radioHandler}>
      <label>My label:</label>
      <input type="radio" value="1" name="group_x" defaultChecked /> One
      <input type="radio" value="2" name="group_x" /> Two
      <input type="radio" value="3" name="group_x" /> Three
    </div>
  );
}