React Bootstrap Modal按钮启用后onClick事件仍不触发如何解决

问题原因 #

你直接通过原生DOM API修改按钮的disabled属性，违反了React状态驱动UI的设计逻辑：

• JSX中直接写了disabled属性，等价于disabled={true}，React的虚拟DOM会始终认为该按钮处于禁用状态，即使你修改了真实DOM的属性，React内部的事件绑定、重渲染逻辑都会以自身维护的状态为准，导致点击事件无法正常触发。
• 直接操作DOM是React开发不推荐的写法，容易出现状态和UI不同步的问题。

解决方法 #

用React状态控制按钮的禁用状态，完全移除DOM操作逻辑：

1. 新增一个状态记录复选框的勾选状态
2. 复选框勾选变更时直接修改该状态
3. 按钮的disabled属性直接绑定该状态

修正后完整代码 #

const [show, setShow] = useState(false)
// 新增状态控制按钮是否禁用
const [isAgreed, setIsAgreed] = useState(false)

useEffect(() =>{
  // 原有API调用逻辑保留
  setShow(true)
}, [])

// 关闭弹窗逻辑不变
const handleClose = () => setShow(false);

return (
  <Modal show={show} onHide={() => history.push("/")}>
    <Modal.Header closeButton>
      <Modal.Title>Gebruiksvoorwaarden</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </Modal.Body>
    <Modal.Body>
      {/* 勾选时直接修改isAgreed状态 */}
      <input type="checkbox" onChange={(e) => setIsAgreed(e.target.checked)} />
    </Modal.Body>
    <Modal.Footer>
      {/* disabled绑定状态：没勾选就禁用，勾选就启用 */}
      <Button variant="danger" disabled={!isAgreed} onClick={handleClose}>
        Accept
      </Button>
    </Modal.Footer>
  </Modal>
)

内容的提问来源于stack exchange，提问作者Hoezo