来自 javascript 的单击事件未在反应渲染页面的按钮元素上触发

Question

我正在 chrome 扩展中编写一个脚本（内容脚本），用于 https://akhileshcoder.com/social 中的 React 渲染页面。

但看起来反应并不令人愉悦，并且点击从外部触发。

应用上下文如下：

它有如下按钮：

 <div className="form-group">
        <button className="btn btn-primary submit-btn" onClick={sendData} disabled={dataState !== API_STATE.PENDING}>Send</button>
      </div>

以及输入字段，例如：

<div className="form-group">
        <label className="form-label" htmlFor="ak-form-input-message">
          Message
        </label>
        <textarea
          className="form-input"
          id="ak-form-input-message"
          placeholder="Textarea"
          rows={3}
          onKeyUp={e => setData('message', e)}
        />
      </div>

我从开发人员工具的控制台面板触发它的单击事件，如下所示：

document.querySelector('#root > div > div.page > div > div > div.message-form > div:nth-child(8) > button').click();

元素的 CSS 选择器正确并返回有效文档

当我手动单击元素时，它可以工作，但以同步方式触发事件，它无法检测到更改。

我的猜测是（不确定），反应是否在某个地方验证事件是否从外部触发，如果是这种情况（即使不是）如何在外部模拟事件。

• 下面是我以编程方式触发的事件的 json 转储。

    [ 
    {
        "id": "ak-form-input-name",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "text",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(1) > input",
        "textValue": "fqwefwefwe",
        "selector": "#ak-form-input-name",
        "value": "fqwefwefwe",
        "TRIGGER_TYPE": "keydown"
      },
      {
        "id": "ak-form-input-name",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "text",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(1) > input",
        "textValue": "fqwefwefwe",
        "selector": "#ak-form-input-name",
        "value": "fqwefwefwe",
        "TRIGGER_TYPE": "keyup"
      },
      {
        "id": "ak-form-input-name",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "text",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(1) > input",
        "textValue": "fqwefwefwe",
        "selector": "#ak-form-input-name",
        "value": "fqwefwefwe",
        "TRIGGER_TYPE": "change"
      },
      {
        "id": "ak-form-input-email",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "email",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(2) > input",
        "textValue": "[email protected]",
        "selector": "#ak-form-input-email",
        "value": "[email protected]",
        "TRIGGER_TYPE": "keydown"
      },
      {
        "id": "ak-form-input-email",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "email",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(2) > input",
        "textValue": "[email protected]",
        "selector": "#ak-form-input-email",
        "value": "[email protected]",
        "TRIGGER_TYPE": "keyup"
      },
      {
        "id": "ak-form-input-email",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "email",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(2) > input",
        "textValue": "[email protected]",
        "selector": "#ak-form-input-email",
        "value": "[email protected]",
        "TRIGGER_TYPE": "change"
      },
      {
        "id": "ak-form-input-mob",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "tel",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(3) > input",
        "textValue": "feqfwefwefwe",
        "selector": "#ak-form-input-mob",
        "value": "feqfwefwefwe",
        "TRIGGER_TYPE": "keydown"
      },
      {
        "id": "ak-form-input-mob",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "tel",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(3) > input",
        "textValue": "feqfwefwefwe",
        "selector": "#ak-form-input-mob",
        "value": "feqfwefwefwe",
        "TRIGGER_TYPE": "keyup"
      },
      {
        "id": "ak-form-input-mob",
        "className": "form-input",
        "tagName": "INPUT",
        "type": "tel",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(3) > input",
        "textValue": "feqfwefwefwe",
        "selector": "#ak-form-input-mob",
        "value": "feqfwefwefwe",
        "TRIGGER_TYPE": "change"
      },
      {
        "id": "ak-form-input-message",
        "className": "form-input",
        "tagName": "TEXTAREA",
        "type": "textarea",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(5) > textarea",
        "textValue": "efwefwefwef",
        "selector": "#ak-form-input-message",
        "value": "efwefwefwef",
        "TRIGGER_TYPE": "keydown"
      },
      {
        "id": "ak-form-input-message",
        "className": "form-input",
        "tagName": "TEXTAREA",
        "type": "textarea",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(5) > textarea",
        "textValue": "efwefwefwef",
        "selector": "#ak-form-input-message",
        "value": "efwefwefwef",
        "TRIGGER_TYPE": "keyup"
      },
      {
        "id": "ak-form-input-message",
        "className": "form-input",
        "tagName": "TEXTAREA",
        "type": "textarea",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(5) > textarea",
        "textValue": "efwefwefwef",
        "selector": "#ak-form-input-message",
        "value": "efwefwefwef",
        "TRIGGER_TYPE": "change"
      },
      {
        "id": "",
        "className": "btn btn-primary submit-btn",
        "tagName": "BUTTON",
        "type": "submit",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(7) > button",
        "textValue": "",
        "selector": "button.btn.btn-primary.submit-btn",
        "value": null,
        "TRIGGER_TYPE": "mousedown"
      },
      {
        "id": "",
        "className": "btn btn-primary submit-btn",
        "tagName": "BUTTON",
        "type": "submit",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(7) > button",
        "textValue": "",
        "selector": "button.btn.btn-primary.submit-btn",
        "value": null,
        "TRIGGER_TYPE": "mouseup"
      },
      {
        "id": "",
        "className": "btn btn-primary submit-btn",
        "tagName": "BUTTON",
        "type": "submit",
        "domPath": "body > div:nth-of-type(2) > div > div:nth-of-type(3) > div > div > div:nth-of-type(1) > div:nth-of-type(7) > button",
        "textValue": "",
        "selector": "button.btn.btn-primary.submit-btn",
        "value": null,
        "TRIGGER_TYPE": "click"
      }
    ]

• 下面是我在扩展中使用的代码，用于在内容脚本上播放事件：

这是屏幕截图，当数据被填充时，但我猜单击和更改事件不会在反应上下文中触发。

Answer 1

直接调用onClick处理程序： 您可以尝试直接调用与按钮关联的 onClick 处理函数，而不是在按钮元素上触发单击事件。例如：

javascript代码

const buttonElement = document.querySelector('.submit-btn'); 按钮元素 && 按钮元素.onclick();

---