Cách Trigger Sự Kiện Change Trong React Từ Trình Duyệt - Blog

Mở đầu

Nếu bạn đã từng tìm cách để trigger sự kiện change từ trình duyệt(browser) và muốn nó gọi sự kiện onChange ở trong project react, bạn sẽ gặp không ít khó khăn vì change event trong react đã được tùy biến lại cho phù hợp với các loại browser khác nhau.

Ví dụ ta có một đoạn html như sau:

<input type="text" class="myInput">

Hàm onChange trong react sẽ đơn giản như sau:

return ( <input type="text" class="myInput" onChange={() => {console.log('changed')}}> )

Bình thường khi ta muốn trigger change thì ta có thể xử lý bằng jquery hay nativejs như dưới đây:

// Using jQuery $('.myInput:first').change() // ====================== // Or using nativejs var changeEvent = new Event('change', {bubbles: true}) var element = document.getElementsByClassName('myInput')[0] element.dispatchEvent(changeEvent)

Nhưng cả 2 cách phía trên đều sẽ không hoạt động.

Giải pháp

Bằng cách sử dụng script này, ta có thể trigger được event change một cách dễ dàng trong react.

Ta sẽ muốn sử dụng đoạn script trên và jquery cùng lúc trên browser cho tiện.

• Đầu tiên cần load đoạn script trên vào trình debug của browser:

javascript: (function() { e = document.createElement('script') e.src = 'https://unpkg.com/react-trigger-change/dist/react-trigger-change.js' e.onload = function() { console.log('react-trigger-change injected'); }; document.head.appendChild(e); })()

• Sau khi load đoạn script trên thành công thì ta load tiếp thư viện jQuery vào browser (nếu chưa có):

javascript: (function() { e = document.createElement('script') e.src = 'https://unpkg.com/react-trigger-change/dist/react-trigger-change.js' e.onload = function() { console.log('react-trigger-change injected'); requireJquery() }; document.head.appendChild(e); })() function requireJquery() { e = document.createElement('script') e.src = 'http://code.jquery.com/jquery-latest.min.js' e.onload = function() { jQuery.noConflict(); $ = jQuery console.log('jquery injected'); // execute html dom with jquery here }; document.head.appendChild(e); }

• Và đoạn code đầy đủ cho ví dụ ở phần mở đầu:

javascript: (function() { e = document.createElement('script') e.src = 'https://unpkg.com/react-trigger-change/dist/react-trigger-change.js' e.onload = function() { console.log('react-trigger-change injected'); requireJquery() }; document.head.appendChild(e); })() function requireJquery() { e = document.createElement('script') e.src = 'http://code.jquery.com/jquery-latest.min.js' e.onload = function() { jQuery.noConflict(); $ = jQuery console.log('jquery injected'); exec() }; document.head.appendChild(e); } function exec() { var $input = $('.myInput:first') // get jquery element $input.val('blog.daovanhung.com') var input = $input.get(0) // get javascript dom reactTriggerChange(input) }

Link tham khảo:

https://stackoverflow.com/questions/39065010/why-react-event-handler-is-not-called-on-dispatchevent