I'm trying to add a close confirmation prompt on a dialog, but I'm getting this error. Am i missing something?
Uncaught TypeError: Cannot read property 'appendChild' of undefined
at t.value (rc-easyui-min.js:15)
at t.value (rc-easyui-min.js:15)
at t.value (rc-easyui-min.js:15)
at Object.onClick (rc-easyui-min.js:15)
at t.value (rc-easyui-min.js:10)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)
import React, { useRef, useState } from 'react';
import './App.css';
import { Dialog, LinkButton, Messager } from 'rc-easyui';
function App() {
const messager = useRef();
const [closed, setClosed] = useState(false);
function onClose() {
if(!closed) {
messager.current.confirm({
title: "Confirm",
msg: "Are you sure?",
result: r => {
if (r) {
setClosed(true);
}
}
});
}
}
function header() {
//window-restore
return (
<div key="x">
<div className="panel-title">Test</div>
<LinkButton style={{ position: "absolute", right: "0px", top: "0px", height: "19px" }} plain onClick={onClose}>
<i >X</i>
</LinkButton>
</div>
)
}
return (
<div>
<Dialog
header={header}
closed={closed}
closable={false}
>
Content
</Dialog>
<Messager ref={messager} />
</div>
);
}
export default App;