Реакция jsx версии html (с использованием разных тегов, но с тем же атрибутом и логикой c) не вызывает метод jquery on ('change')

Question

Я переношу код jQuery / javascript в React по частям, и по какой-то причине я не могу активировать событие "change" при изменении значения React / Redux, так как оно выключено в html. Кто-нибудь знает, почему это может быть причиной того, что событие «change» не запускается?

Исходный код html:

<div class="form-group row" style="margin-top: 10px!important;" >
  <div class="col-md-2"><lang data-key="Resolution" /></div>
  <div class="col-md-4">
     <select class="form-control" id="screensize" style="width:100%;">
        <option value="1920x1080" >1920 x 1080</option>
        <option value="1680x1050">1680 x 1050</option>
        <option value="1440x900">1440 x 900</option>
        <option value="1280x800">1280 x 800</option>
        <option value="1024x768">1024 x 768</option>
        <option value="800x640" selected>800 x 640</option>
     </select>
  </div>
</div>

Моя реагирующая версия этого.

import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => {
    return {
        ...
        settings: state.settings,
    };
};
class DomStateWrapper extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
          <div>
             ...
             <input
                id="screensize"
                value={this.props.settings.resolution}  //** I have confirmed that this attribute gets its value from the redux store successfully
             />
             ...                      
          </div>

      )
   }
}

export default connect(mapStateToProps)(DomStateWrapper);

Код jQuery, который я использую, чтобы использовать изменения

      $(document).on("change", "#screensize", function(e) {
        var sizes = $(this)
          .val()
          .split("x");
        if (showWin != null) showWin.resizeTo(sizes[0], sizes[1]); // resize the popup
      });

В целом, оригинальная html версия этого кода, которая использует и устанавливает его значение и триггеры. метод изменения в коде jquery, но когда я делаю это в реакции / избыточности, используя этот метод .on (), он никогда не запускается. Я также использовал этот сайт в качестве ссылки для события "change".

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Answer 1

Вы не должны использовать jQuery в своем приложении ReactJS.

Сделайте это вместо:

<input
  onChange={resizeWin}
  value={this.props.settings.resolution}  //** I have confirmed that this attribute gets its value from the redux store successfully
/>

const resizeWin = e => {
  var sizes = e.target.value.split("x");
  if (showWin != null) showWin.resizeTo(sizes[0], sizes[1]); // resize the popup
}