React bootstrap 模态按钮即使在启用按钮后也不会触发 onClick 方法

Question

该按钮在开始时是禁用的，只有在输入复选框被选中后才能启用。我遇到的问题是，即使我将 disabled 设置为 false，按钮上的 onClick 也不起作用，当我删除 disabled 标签时，onClick 方法起作用。

const [show, setShow] = useState(false)

useEffect(() =>{
//I do an api call here but for simplicity just assume the modal always shows at the start
setShow(true)
}, [])

//Close the modal
const handleClose = () => setShow(false);

//This function will make the button available depending if the user has accepted the conditions.
const enableButton = (enabled) =>{
    if (enabled){
        document.getElementById("btn").disabled = false;
    } else document.getElementById("btn").disabled = true;

<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>
              <input id="check" type="checkbox" onChange={() => enableButton(document.getElementById("check").checked)}></input>
          </Modal.Body>
          <Modal.Footer>
            <Button id="btn" variant="danger" disabled onClick={() => handleClose()} >
              Accept
            </Button>
          </Modal.Footer>
</Modal>

模式应该在按下按钮后关闭。感谢您的帮助！

Answer 1

您正在传递一个没有值的 disabled 属性，这意味着该值将始终为 true。

显然您没有完全正确理解 ReactJS 中组件的属性是如何工作的。您尝试更改属性的方式不会产生预期的效果，因为 您正在更改 DOM 对象的属性，而不是组件 .

您可以尝试使用 useState 存储、更改和传递您的 disabled 值，如下所示：

const [show, setShow] = useState(false);
const [disabled, setDisabled] = useState(true);

useEffect(() =>{
    setShow(true);
}, []);

const handleClose = () => setShow(false);

const toggleButton = () => setDisabled(!disabled);

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>
            <input id="check" type="checkbox" onChange={toggleButton}></input>
        </Modal.Body>
        <Modal.Footer>
            <Button id="btn" variant="danger" disabled={disabled} onClick={handleClose}>
                Accept
            </Button>
        </Modal.Footer>
    </Modal>
);

React bootstrap 模态按钮即使在启用按钮后也不会触发 onClick 方法

React bootstrap modal button doesnt fire off onClick method even after enabling button

javascript

reactjs

react-bootstrap