CustomEvent 試用紀錄
CustomEvent, EventTarget 試用紀錄
引言
CustomEvnet 與 EevntTaregt 合作
關鍵程式碼紀錄
主程式(WebForm Page)
內層元件(React Component)
沒圖沒真象

Last updated
CustomEvent, EventTarget 試用紀錄

Last updated
<html>
[...略...]
<h1>Foo Page 02</h1>
<%-- React 元件將鑲在此處 --%>
<asp:Panel ID="MyCounter" runat="server">MyCounter first rendered.</asp:Panel>
<h6>Event List</h6>
<ul id="myEventList">
</ul>
<script>
<%-- init --%>
const myTarget = new EventTarget(); //------ 增加 EventTarget 以接收 CustomEvent。
myTarget.addEventListener("my-counter-up", function (event) {
console.log('my-counter-up', { event });
<%-- To response event --%>
const myEventList = document.getElementById('myEventList');
const item = document.createElement('li');
item.innerText = `type:${event.type}, detail:${event.detail}`;
myEventList.appendChild(item);
});
//------ 把 EventTarget 送到內層子元件,將用來發送 CustomEvent。
renderMyCounter(<%= $"'{MyCounter.ClientID}'" %>, 17, myTarget);
</script>
</html> "use strict";
import React from 'react' // 第18版
import ReactDOM from 'react-dom/client'
import MyCounter from './MyCounter'
//## 註冊雙向繫結 React 元件:MyCounter
window.renderMyCounter = function (rootElementId, initCount, evtTarget) {
function handleChange(newCount) {
// events up
//------ 利用 EventTarget 之 dispatchEvent 指令把 CustomEvent 送出去外面。
//------ ※注意:訊息放在物件之 detail 欄位下。
evtTarget.dispatchEvent(new CustomEvent("my-counter-up", { detail: newCount }));
}
// props down
const rootElement = document.getElementById(rootElementId);
const root = ReactDOM.createRoot(rootElement);
root.render(<MyCounter initCount={initCount} onChange={handleChange} />);
}