Javascript React组件上的单选按钮需要额外单击以进行标记

我有一个非常简单的react功能组件，带有一个div和一些radio类型的输入。 就这样,

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

constradiohandler=（事件）=>{
event.preventDefault（）；
日志（event.target.value）；
}
返回(
我的标签：
一个
两个
三
);

看起来很简单，如下所示：

发生的情况是，根据需要，默认情况下会选中选项1。但是，当我点击其他按钮时，需要额外的点击才能真正更改为我要检查的那个。我添加了一个´´´´´preventDefault（）´´´´方法，因为如果没有它，我将单击选项2，然后单击选项3，它将跳转到默认选中的方法，而不是3。但是使用

preventDefault

时，需要额外的点击才能使蓝点实际转到所需的选项。为什么会这样？如何使其正常工作？

希望这有助于： 基本上删除preventDefault行为和defaultChecked而不是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>
  );
}

导入“/styles.css”； 导出默认函数App（）{ 常量radioHandler=（事件）=>{ 日志（event.target.value）； }; 返回( 我的标签： 一个 两个 三 ); }