更改从 chrome 扩展名做出反应的输入值

Question

我在 Chrome 扩展程序上工作，我需要根据从 CSV 读取的数字更新使用 React 制作的 html 页面的大量输入。我无法更新网站。

- 从渲染网站复制的输入示例：

  <td><input class="input input_small fpInput" value="29,4"></td>

- 它是如何制作的（不确定 100%，必须阅读丑陋的 js 源代码）

{
    key: "render",
    value: function () {
        return s.a.createElement("input", {
            className: "input input_small fpInput",
            value: this.state.value,
            onChange: this.handleChange,
            onBlur: this.handleSubmit,
            onFocus: this.handleFocus
        })
    }
}

- 每次更改输入值时，都会调用一个函数并进行 POST 以保存它。

我想在更改输入值以触发 POST 后从我的扩展中触发onBlur()或onChange()

我试过这个：

var el = document. ... .querySelector('input'); // the selector is simplied of course
el.value = 321;
el.onChange();  // ERROR onChange is not a function
el.onchange();  // ERROR onchange is not a function
el.handleChange(); // ERROR handleChange is not a function

有什么想法吗？

Answer 1

你不能直接从 React 组件渲染的 DOM 元素调用它的方法。您需要触发一个冒泡的事件，以便 React 可以在该document级别捕获它并正常处理它，就像处理真实的事件一样。

\n\n

\xe2\x9c\xa8 Document.execCommand():

\n\n

正如 @woxxom 在评论中指出的，最简单的方法可能是集中输入，然后使用Document.execCommand()：

\n\n

\r\n

\r\n

const input1 = document.getElementById(\'input1\');\r\nconst input2 = document.getElementById(\'input2\');\r\n\r\ninput1.focus();\r\ndocument.execCommand(\'insertText\', false, \'input1\');\r\n\r\ninput2.focus();\r\ndocument.execCommand(\'insertText\', false, \'input2\');

\r\n

<input id="input1" />\r\n<input id="input2" />

\r\n

\r\n

\r\n

\n\n

\xe2\x9a\x92\xef\xb8\x8f 手动调度事件：

\n\n

否则，您可以在更改这些字段的值后尝试使用这些字段中的Event() 构造函数手动调度change,input和/或blur事件。

\n\n

另外，请注意Event()\ 的第二个可选参数包含一个默认bubbles字段false。你需要那个人true。否则，这将不起作用，因为 React 正在监听document.

\n\n

此外，您可能还需要使用Element.setAttribute()，因为这将更新valueDOM 上的属性（字段上的初始值），同时element.value将更新当前值（以及显示值）。但通常情况下，这是不需要的。有关这方面的更多信息，请参阅HTML 中的属性和特性有什么区别？。

\n\n

这种方法可能会存在一些计时问题，您可能需要在更新多个输入时处理使用setTimeout，因此如果第一个方法有效，我会选择第一个方法。

\n\n

\r\n

\r\n

const input1 = document.getElementById(\'input1\');\r\n\r\n// This updates the value displayed on the input, but not the DOM (you can do that with setAttribute,\r\n// but it\'s not needed here):\r\ninput1.value = \'input1\';\r\n\r\n// Dispatch an "input" event. In some cases, "change" would also work:\r\ninput1.dispatchEvent(new Event(\'input\', { bubbles: true }));\r\n\r\n// It looks like only one field will be updated if both events are dispatched\r\n// straight away, so you could use a setTimeout here:\r\n\r\nsetTimeout(() => {\r\n  const input2 = document.getElementById(\'input2\');\r\n  input2.value = \'input2\';\r\n  input2.dispatchEvent(new Event(\'input\', { bubbles: true }));    \r\n});

\r\n

<input id="input1" />\r\n<input id="input2" />

\r\n

\r\n

\r\n

\n

Answer 2

详细说明@varoons 的答案，尽管解释有点短，但实际上是正确的。

您可以通过将事件注入（在浏览器中分派）事件到 dom 中来实现：

// Needs setAttribute to work well with React and everything, just `.value` doesn't cut it
// Also changed it to a string, as all attributes are strings (even for <input type="number" />)
el.setAttribute("value", "321"); 

// As @wOxxOm pointed out, we need to pass `{ bubbles: true }` to the options,
// as React listens on the document element and not the individual input elements
el.dispatchEvent(new Event("change", { bubbles: true }));
el.dispatchEvent(new Event("blur", { bubbles: true }));

这实际上会调用所有侦听器，甚至是那些用 React 制作的（就像你的 deuglyfied 代码 ;)）或用简单的element.onChange = () => {...}侦听器制作的。

示例：https : //codesandbox.io/s/kml7m2nn4r