Послать реакту событие об изменении checkbox'а

199

22 ноября 2017, 01:15

Пытаюсь через dispatchEvent послать событие так, чтобы React его обработал, но по какой-то причине обработчик onChange в реакте не вызывается, хотя все нативные обработчики вызываются как и должны:

ReactDOM.render( 
  React.createElement('input', { 
    type: 'checkbox', 
    id: "chk", 
    onChange: function (e) { console.log("react") } // Не вызывается :( 
  }), 
  document.querySelector("main") 
); 
 
var chk = document.getElementById("chk") 
 
chk.addEventListener('change', function (e) { console.log("native") }); 
document.addEventListener('change', function (e) { console.log("native + bubbling") }); 
document.addEventListener('change', function (e) { console.log("native + capturing") }, true); 
 
document.querySelector("button").addEventListener('click', function (e) { 
  console.log(">>> DISPATCH BEGIN"); 
   
  chk.checked = !chk.checked; 
   
  var e = document.createEvent("Events"); 
  e.initEvent('change', true, true); 
  chk.dispatchEvent(e); 
   
  console.log(">>> DISPATCH END"); 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script> 
 
<main></main> 
<button>Dispatch</button>

Answer 1

React хочет получить событие click, а не change.
Отправка клика сама инвертирует значение чекбокса, поэтому эту строку надо убрать.

Получается такой код:

var e = document.createEvent("MouseEvents");
e.initEvent('click', true, true);
chk.dispatchEvent(e);

который можно упростить до

chk.click();

ReactDOM.render( 
  React.createElement('input', { 
    type: 'checkbox', 
    id: "chk", 
    onChange: function (e) { console.log("react") } 
  }), 
  document.querySelector("main") 
); 
 
var chk = document.getElementById("chk") 
 
chk.addEventListener('change', function (e) { console.log("native") }); 
document.addEventListener('change', function (e) { console.log("native + bubbling") }); 
document.addEventListener('change', function (e) { console.log("native + capturing") }, true); 
 
document.querySelector("button").addEventListener('click', function (e) { 
  console.log(">>> DISPATCH BEGIN"); 
   
  ////var e = document.createEvent("MouseEvents"); 
  ////e.initEvent('click', true, true); 
  ////chk.dispatchEvent(e); 
 
  chk.click(); 
   
  console.log(">>> DISPATCH END"); 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script> 
 
<main></main> 
<button>Dispatch</button>