javascript - 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.preventDefault() 阻止它立即更改它

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