JavaScriptを使用してプログラムで.click（）がReactJS要素でトリガーされない

Question

私は、プログラムで反応するJS要素をクリックしようとしています。例えば

このリンクをチェックしてください：Click Here

私は主な製品の画像を変更します見本画像にクリックすることができませんでしだ。

私はこの下のコードで試してみました：両方が動作していない

document.querySelector('#product-selection-4476800 > section.np-sku-filters > div.np-circular-swatches.small > ul > li:nth-child(2) > a').click(); 

document.querySelector('#product-selection-4476800 > section.np-sku-filters > div.np-circular-swatches.small > ul > li:nth-child(2) > a > span > img').click(); 

。私も試しました

function clickElement(el){ 
    var ev = document.createEvent("MouseEvent"); 
    ev.initMouseEvent(
     "click", 
     window, null, 
     false, false, false, false, 
     0, null 
    ); 
    el.dispatchEvent(ev); 
} 

まだ要素が変更されていません。

ありがとうございます！

Answer 1

DOMの外側からReactJS要素をクリックするという解決策が見つかりました。

var elm = document.querySelector('#product-selection-4476800 > section.np-sku-filters > div.np-circular-swatches.small > ul > li:nth-child(2) > a'); 

function triggerEvents(n, e){ 
    var ev = document.createEvent('MouseEvents'); 
    ev.initEvent(e, true, true); 
    n.dispatchEvent(ev); 
} 

triggerEvents(elm, "mouseover"); 
triggerEvents(elm, "mousedown"); 
triggerEvents(elm, "click"); 
triggerEvents(elm, 'mouseup'); 

期待どおりに動作します。

お時間をいただきありがとうございます。 :)