React 单选按钮需要单击两次才能呈现

Question

我正在控制 React 表单上的单选按钮。

状态正在按预期更新，但 checked 值未在更改时重新呈现。因此，从用户的角度来看，该按钮不起作用。

我已经在此处的 codesandbox 中复制了它 https://codesandbox.io/s/eager-hertz-stzgk?file=/src/App.js

相关代码：

const [selectedRole, setSelectedRole] = useState("staff");

...

  const handleRoleChange = (event) => {
    event.preventDefault();
    setSelectedRole(event.target.value);
  };

...

<form>
        <label>
          Staff
          <input
            type="radio"
            name="role"
            value="staff"
            checked={selectedRole === "staff"}
            onChange={handleRoleChange}
          />
        </label>
        <label>
          Student
          <input
            type="radio"
            name="role"
            value="student"
            checked={selectedRole === "student"}
            onChange={handleRoleChange}
          />
        </label>
      </form>

感谢任何帮助，因为我没有想法。

谢谢

Answer 1

那是因为第 9 行的 event.preventDefault() 停止它以立即更改它

编辑 1：2/5/2022：也可以参考：docs

React 单选按钮需要单击两次才能呈现

React radio button requires two clicks to render

javascript

radio

reactjs

controlled-component