我有這個 useState 元素，但沒有呼叫 onClick 函式。我嘗試了許多解決方案和除錯，似乎無論如何都不會呼叫 Click 事件。
const [modalHotel, setModalHotel] = useState(false)
{modalHotel && <ModalHotel CloseModal = {setModalHotel} />}
<img src="./assets/square.svg" alt="useState 的 setFunction 不會改變 OnClick" onClick={() => setModalHotel(!modalHotel)}/>
uj5u.com熱心網友回復：
有時元素不會onClick在 React 中注冊事件，除非你指定tabIndex. 試試這個：
const checkClick = () => {
console.log("It worked!!");
setModalHotel(!modalHotel);
}
<img tabIndex={0} src="./assets/square.svg" alt="expand" onClick={checkClick} />
這將幫助您除錯單擊事件是否實際被觸發。
邊注：
從可訪問性的角度來看，幾乎總是更喜歡使用buttonora元素來處理這樣的點擊。默認情況下，它們具有 tabIndexes，并且通常具有更好的 a11y 支持。
uj5u.com熱心網友回復：
發現問題了！
我z-index: -1;在我的css中有這個，洗掉它并且它有效。
uj5u.com熱心網友回復：
您還沒有真正提供足夠的資訊來完全診斷您的問題。但與此同時，這是一個作業片段，其中包含一個可單擊的元素（一個按鈕），以使用useState鉤子切換狀態。您可以比較您的非作業代碼和這個作業示例之間的不同之處。
const { useState } = React;
const Thing = (props) => {
const [modalHotel, setModalHotel] = useState(false);
return (
<div>
<h1>{modalHotel.toString()}</h1>
<button onClick={() => setModalHotel(!modalHotel)}>Toggle</button>
</div>
);
}
ReactDOM.render(
<Thing />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464691.html
標籤：javascript 反应