React单选按钮需要单击两次才能渲染

Question

我正在控制一个反应窗体上的单选按钮。

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

我已经在这里的代码沙盒中复制了这个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.prventDefault((使其停止以立即更改

编辑时间：2022年5月1日：你也可以参考：文档