電子 API 不作業。我收到以下錯誤。我看到 sendPin 功能不起作用。
Uncaught TypeError: Cannot read properties of undefined (reading 'sendPin')
at HTMLDocument.handlekeyUp (pin-pad:86:28)
pin-pad:61 Uncaught TypeError: Cannot read properties of undefined (reading 'sendPin')
at HTMLDivElement.<anonymous> (pin-pad:61:28)
在我添加以下代碼行之前它一直有效，因此我懷疑這可能是主要原因。
if (13 === e.keyCode) { window.electronAPI.sendPin(Pin);
index.html 如下。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="pinpad.css" />
<meta charset="UTF-8" />
<title>Electron Test - Pin Pad</title>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
</head>
<body>
<div id="container">
<div id="wrapper">
<input type="password" id="display" disabled />
<div id="pin-pad">
<div data-number="1">1</div>
<div data-number="2">2</div>
<div data-number="3">3</div>
<div data-number="4">4</div>
<div data-number="5">5</div>
<div data-number="6">6</div>
<div data-number="7">7</div>
<div data-number="8">8</div>
<div data-number="9">9</div>
<div>Enter</div>
<div data-number="0">0</div>
<div>Clear</div>
</div>
</div>
</div>
</body>
<script>
let display = document.getElementById("display");
let validKeys = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"0",
"Enter",
"Clear",
];
let pin = "";
document.getElementById("pin-pad").addEventListener("click", (event) => {
if (!validKeys.includes(event.target.innerText)) {
return;
}
if (event.target.innerText === "Enter") {
window.electronAPI.sendPin(pin);
return;
}
if (event.target.innerText === "Clear") {
pin = display.value = "";
return;
}
pin = pin event.target.innerText;
display.value = "*".repeat(pin.length);
});
///tests
const handlekeyUp = function (e) {
e.stopPropagation();
const input = document.getElementById("display");
console.log(input, e.key, input.value);
var reg = new RegExp("^[0-9]$");
const number = document.querySelector(`[data-number="${e.key}"]`);
if (reg.test(e.key)) input.value = e.key;
if (number) number.style.backgroundColor = "#fff";
if (13 === e.keyCode) {
window.electronAPI.sendPin(Pin);
}
};
const handleKeyDown = (e) => {
const number = document.querySelector(`[data-number="${e.key}"]`);
if (!number) {
return;
}
number.style.backgroundColor = "#eee";
};
document.addEventListener("keyup", handlekeyUp);
document.addEventListener("keydown", handleKeyDown);
</script>
</html>
main.js
const electronApp = require("electron").app;
const electronBrowserWindow = require("electron").BrowserWindow;
const electronIpcMain = require("electron").ipcMain;
const nodePath = require("path");
// Prevent garbage collection
let window;
function createWindow() {
const window = new electronBrowserWindow({
fullscreen: true,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: nodePath.join(__dirname, "preload.js"),
},
});
window.loadFile("pin-pad.html").then(() => {
window.show();
});
return window;
}
electronApp.on("ready", () => {
window = createWindow();
});
electronApp.on("window-all-closed", () => {
if (process.platform !== "darwin") {
electronApp.quit();
}
});
electronApp.on("activate", () => {
if (electronBrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// ---
electronIpcMain.on("pin", (event, pin) => {
// Simple check of pin validity
if (pin === "1234") {
window.loadFile("sales.html");
}
});
preload.js 如下，我也添加了以防萬一。
const contextBridge = require("electron").contextBridge;
const ipcRenderer = require("electron").ipcRenderer;
contextBridge.exposeInMainWorld("electronAPI", {
sendPin: (pin) => {
ipcRenderer.send("pin", pin);
},
});
uj5u.com熱心網友回復：
參考index.html，在if (13 === e.keyCode) { ... }陳述句中，window.electronAPI.sendPin(...);呼叫的引數是不正確的情況。而不是Pin，它應該是pin。
也就是說，pin不會在您的const handlekeyUp = function (e) { ... }函式中更新，因此當按下“Enter”（或“Return”）時，它無法向pin您的渲染程序發送更新。
仔細查看index.html檔案中包含的 JavaScript 代碼：
- 無需停止事件傳播。
- 正則運算式可能是棘手的事情，有時難以實施。僅在您確實需要時才使用它們。
- 看來您正在使用該
#display值而不是使用已定義的pin變數來構建您的pin.
繼續使用已經定義的pin變數，您可以同時使用滑鼠和鍵盤（如果用戶真的想要）來輸入 pin。
使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/495948.html