Both click() and dispatchEvent does not trigger automatic click in reactjs

Question

I have a react component that has an SVG image. I have divided the SVG into multiple react box. I have query selector which selects all the react box and JS click event to auto click that react.

I tried working with both click and dispatch event. But none of them works in my scenario.

Below is the section of the code I am working on.

componentDidMount() {
    var element =  document.querySelectorAll("square");
    for(var i = 0; i<element.length; i++) {
      element[i].dispatchEvent(new Event('click'));
    }
}

render(){
    return (
      <React.Fragment>
        <div className="col-12">
          <svg  viewBox="0 0 100 100">
            <image xlinkHref={imageFile}  height="100%" width="100%" />
            <g><rect className="square" x="10" y="10" width="20" height="10" fillOpacity=".2"  onClick={() =>console.log("clicked")}></rect> </g>         
            <g><rect className="square" x="30" y="10" width="20" height="10" fillOpacity=".4"  onClick={() =>console.log("clicked")}></rect> </g>              
          </svg>
        </div>
      </React.Fragment>
    )

}

I also tried using the click() function and did not work for SVG images and also is there a way we could automate a click in each square every 10 seconds?

in your example you have put the Onclick inside the fillOpacity, so it won't work. — Danny Hobo
– Danny Hobo, Commented Apr 23, 2021 at 21:57
I have added closing ". While my code has the closing ". And it was not the issue. — MPK
– MPK, Commented Apr 23, 2021 at 22:00
I have model attached on each square. So user don't have to click on the screen as automatic clip would trigger the model for each square. @mzedeler — MPK
– MPK, Commented Apr 26, 2021 at 15:03
I am using <rect> element. On click function works when I manually click. But does not use when I target that class with click() function.@RobertLongson — MPK
– MPK, Commented Apr 26, 2021 at 15:58

Guerric P · Accepted Answer · 2021-04-26 18:13:02Z

You forgot a . in the query selector so the node list was actually empty.

If you want to automate a click in each square every 10 seconds, this code does the trick:

const elements = document.querySelectorAll(".square");

const intervalsIdentifiers = Array.from(elements).map(x => setInterval(() => x.dispatchEvent(new Event('click')), 10000));

The dispatchEvent method is indeed the only way, because the rect element doesn't have a click method (only HTML elements do, not SVG elements) as demonstrated below:

console.log('click' in SVGRectElement.prototype); // false

console.log(HTMLElement.prototype.hasOwnProperty('click')); // true

console.log(HTMLButtonElement.prototype instanceof HTMLElement); // true (a button has the click method)
console.log(SVGRectElement.prototype instanceof HTMLElement); // false

The full working code (native JavaScript but should work as well with React in the componentDidMount hook):

const elements = document.querySelectorAll(".square");

const intervalsIdentifiers = Array.from(elements).map(x => setInterval(() => x.dispatchEvent(new Event('click')), 10000));

<div className="col-12">
  <svg  viewBox="0 0 100 100">
    <image xlink:Href="https://img-19.ccm2.net/8vUCl8TXZfwTt7zAOkBkuDRHiT8=/1240x/smart/b829396acc244fd484c5ddcdcb2b08f3/ccmcms-commentcamarche/20494859.jpg"  height="100%" width="100%" />
    <g><rect class="square" x="10" y="10" width="20" height="10" fillOpacity=".2"  onclick="console.log('clicked')"></rect> </g>         
    <g><rect class="square" x="30" y="10" width="20" height="10" fillOpacity=".4"  onclick="console.log('clicked')"></rect> </g>              
  </svg>
</div>

Collectives™ on Stack Overflow

Both click() and dispatchEvent does not trigger automatic click in reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related