从外部脚本向 React 中的元素添加事件侦听器

Question

我正在开发 React 应用程序，但我无法更改实际的 React 代码。 我唯一能做的就是：我可以在页面的页脚中添加一个外部脚本。 我想插入应用程序的脚本如下：

 $('input').keyup(function(event) { // skip for arrow keys if(event.which >= 37 && event.which <= 40) return; // format number $(this).val(function(index, value) { return value .replace(/\\D/g, "") .replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Imagine a big react app with some input fields and the above script loaded in the footer using a script tag.</p> <input />

它将小数分隔符添加到所有输入元素。 我是从https://codepen.io/kdivya/pen/oxVeWz 获取的。 但是，它不会那样工作，因为在加载脚本时，DOM 还没有被构建。 因此，根据开发工具，事件侦听器不会添加到输入元素中。

我研究了很多，但所有相关的答案都使用了一些 React 生命周期的东西，但是我不能从外部脚本中使用它。 我还尝试在 $(document).ready(...) 中添加事件侦听器，但它也不起作用。 我对所有想法持开放态度（无论有没有 JQuery，它也可以使用 React，我只是不知道如何从“外部”进入 React 结构）。

Answer 1

主要问题是，如果你将事件处理程序绑定到输入元素，你不知道 React 什么时候会重新渲染，创建没有绑定事件处理程序的新输入元素。 我会做的是使用 jQuery事件委托绑定到body ，但只侦听源自input元素的事件：

 $('body').on('keyup', 'input', function(event) { // skip for arrow keys if(event.which >= 37 && event.which <= 40) return; // format number $(this).val(function(index, value) { return value .replace(/\\D/g, "") .replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); }); }); // Example class component class Thingy extends React.Component { render() { return ( <input /> ); } } // Render it ReactDOM.render( <Thingy />, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"/>

但是，您可能需要手动触发change事件或其他什么，以便 React 会“知道”您更改了输入的值。

就像是：

$('body').on('keyup', 'input', function(event) {
    // ...
    $(this).trigger('change');
});