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

【问题标题】：JavaScript programmatically .click() is not triggered in ReactJS elementJavaScript 以编程方式 .click() 不会在 ReactJS 元素中触发
【发布时间】：2016-10-28 17:27:27
【问题描述】：

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

元素仍然没有改变。

谢谢！

【问题讨论】：

例如，当您说参考时，它表示小提琴或代码 sn-p，而不是您的网站
@Rajesh 抱歉。我正在创建一个 chrome 扩展。哪个将单击元素取决于用户的给定意见。你能帮我点击元素吗？而且我不知道 ReactJS，这就是我无法创建小提琴的原因。谢谢。
也来提问，只是一个建议，如果你使用的是框架或库，尽量使用到最大。这样，您的代码是一致的。因此，与其尝试获取项目并触发点击，不如尝试调用处理程序。如果没有，请尝试以下链接Getting DOM node from React child element
@Rajesh 感谢您的建议。但我在同一个地方。 :(
尝试记录元素。检查你是否得到正确的元素。如果你是，它应该工作。如果可能，您可以创建一个示例小提琴吗？

标签： javascript

【解决方案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');

它按预期工作。

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

【讨论】：