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

Question

我有一个非常简单的 React 功能组件，其中 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。但是使用 preventDefault 需要额外单击才能使蓝点实际转到所需的选项。为什么是这样？我怎样才能让它正常工作？

Answer 1

希望这对您有所帮助：基本上删除了 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>
  );
}

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

Radio buttons on a React component take an extra click to be marked

html

javascript

radio-button

jsx

reactjs