NextJS - onClick 时调用 js 函数答案

【问题标题】：NextJS - Call js function when onClickNextJS - onClick 时调用 js 函数
【发布时间】：2021-12-13 12:03:17
【问题描述】：

当我点击按钮/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
}

返回错误

未处理的运行时错误错误：预期 onClick 侦听器是一个函数，而不是 string 类型的值。

不加addEventListener可以在客户端调用JS函数吗？

【问题讨论】：

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

onClick in react 期望传递一个函数，在您的情况下，您传递的是函数调用返回的值。

所以只需将您的 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：