javascript - 从外部脚本向 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

主要问题是，如果您将事件处理程序绑定(bind)到输入元素，您将不知道 React 何时会重新渲染，从而创建没有绑定(bind)事件处理程序的新输入元素。我要做的是使用 jQuery event delegation绑定(bind)到 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');
});