JavaScript 编程方式 .click() 不会在 ReactJS 元素中触发

Question

我正在尝试以编程方式单击 React 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');

它按预期工作。

感谢大家的宝贵时间和回复。 :)