javascript - NextJS - Call js function when onClick - Stack Overflow

admin管理员组

文章数量:1317906

I want to call js function on client side when I click button/div elements.

This scenario works.(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
    }
}

This scenario I want (without 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 an error

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

Is that possible to call JS function on client-side without addEventListener?

I want to call js function on client side when I click button/div elements.

This scenario works.(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
    }
}

This scenario I want (without 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 an error

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

Is that possible to call JS function on client-side without addEventListener?

• javascript
• reactjs
• next.js
• server-side-rendering

Share Improve this question Follow asked Oct 28, 2021 at 9:24 BK52BK52 93444 gold badges1515 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

onClick in react expects a function to be passed, in your case you are passing a value returned by the function call.

So just change your onClick={ClientClick(1)} to onClick={() => ClientClick(1)}

Changing it to the below code should work.

<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>

Events handling in React (or Next.js) look little different than in a vanilla JS.

Check it out:
https://reactjs/docs/handling-events.html

本文标签： javascriptNextJSCall js function when onClickStack Overflow