NextJS - onClick时调用js函数

Question

我想在点击button/div个元素时在客户端调用js函数。

这个场景有效。(addEventListener)

MyComponent.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" />
             </>
            )
}

Slider.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）

MyComponent.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" />
             </>
            )
}

Slider.js

function ClientClick(clickedId ) {
    // DOM Manipulation
}

Returns 一个错误

Unhandled Runtime Error Error: Expected onClick listener to be a function, instead got a value of string type.

客户端没有addEventListener可以调用JS函数吗？

Answer 1

React（或 Next.js）中的事件处理看起来与 vanilla JS 中的事件处理略有不同。

查看：
https://reactjs.org/docs/handling-events.html

Answer 2

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>

NextJS - onClick时调用js函数

NextJS - Call js function when onClick

javascript

reactjs

server-side-rendering

next.js