Добавить слушатель события в элемент в 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 (...), но это тоже не сработало. Я открыт для всех идей (с * 1016 или без него, он также может использовать 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');
});