當我單擊按鈕/div 元素時，我想在客戶端呼叫 js 函式。
這個場景有效。（addEventListener）
我的組件.js
import Script from 'next/script'
export default function MyComponent({ props }) {
return (
<>
<div className="slider-buttons">
<div key="1" data-id="1" className="slider-button active"></div>
<div key="2" data-id="2" className="slider-button"></div>
<div key="3" data-id="3" className="slider-button"></div>
<div key="4" data-id="4" className="slider-button"></div>
</div>
<Script src="/assets/slider.js" strategy="afterInteractive" />
</>
)
}
滑塊.js
var elements = document.getElementsByClassName("slider-button");
Array.from(elements).forEach(function (element) {
element.addEventListener('click', ClientClick);
});
function ClientClick(e) {
if (e && e.target) {
var clickedId = e.target.getAttribute('data-id');
// DOM Manipulation
}
}
我想要的這個場景（沒有addEventListener）
我的組件.js
import Script from 'next/script'
export default function MyComponent({ props }) {
return (
<>
<div className="slider-buttons">
<div key="1" data-id="1" onClick="ClientClick(1)" className="slider-button active"></div>
<div key="2" data-id="2" onClick="ClientClick(2)" className="slider-button"></div>
<div key="3" data-id="3" onClick="ClientClick(3)" className="slider-button"></div>
<div key="4" data-id="4" onClick="ClientClick(4)" className="slider-button"></div>
</div>
<Script src="/assets/slider.js" strategy="afterInteractive" />
</>
)
}
滑塊.js
function ClientClick(clickedId ) {
// DOM Manipulation
}
回傳錯誤
未處理的運行時錯誤錯誤：預期的
onClick偵聽器是一個函式，而不是一個string型別的值。
是否可以在沒有 addEventListener 的情況下在客戶端呼叫 JS 函式？
uj5u.com熱心網友回復：
React（或 Next.js）中的事件處理看起來與普通 JS 中的沒什么不同。
看看：https :
//reactjs.org/docs/handling-events.html
uj5u.com熱心網友回復：
onClick 在反應中期望傳遞一個函式，在您的情況下，您傳遞的是函式呼叫回傳的值。
所以只需改變你onClick={ClientClick(1)}的onClick={() => ClientClick(1)}
將其更改為以下代碼應該可以作業。
<div key="1" data-id="1" onClick="() => ClientClick(1)" className="slider-button active"></div>
<div key="2" data-id="2" onClick="() => ClientClick(2)" className="slider-button"></div>
<div key="3" data-id="3" onClick="() => ClientClick(3)" className="slider-button"></div>
<div key="4" data-id="4" onClick="() => ClientClick(4)" className="slider-button"></div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339796.html
標籤：javascript 反应 下一个.js 服务器端渲染
上一篇：安裝firebase`npminstall-gfirebase-tools`時出錯
下一篇：如何從嵌套陣列中僅獲取布林值