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

【问题标题】：Radio buttons on a React component take an extra click to be markedReact 组件上的单选按钮需要额外点击才能被标记
【发布时间】：2021-08-16 16:04:20
【问题描述】：

我有一个非常简单的反应功能组件，带有一个带有一些无线电类型输入的 div。就像这样：

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

看起来很简单，像这样：

发生的情况是，默认情况下会根据需要检查选项编号 1。但是当我点击其他人时，需要额外点击一下才能真正更改为我要检查的那个。我添加了一个 ´´´preventDefault()´´´ 方法，因为没有它，我会单击选项 2，然后单击选项 3，它会跳转到默认选中的选项，而不是 3。但是使用 @987654324 @ 需要额外单击才能使蓝点实际转到所需的选项。为什么是这样？我怎样才能让它正常工作？

【问题讨论】：

标签： javascript html reactjs radio-button jsx

【解决方案1】：

希望这会有所帮助：基本上删除 preventDefault 行为和 defaultChecked 而不是选中。

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

【讨论】：