form Electron 应用程序：在 Windows 上删除表单字段后会被禁用，但在提交表单后在 Mac 上工作正常

Question

我的 Electron 应用程序在 Windows 上执行时遇到了问题，但在 macOS 上却没有出现这种问题。它是作为桌面应用程序构建的。问题来了：

当我单击“删除”按钮删除“传输器”，然后单击“添加按钮”时，所有表单字段都将被禁用（无法编辑此表单或应用程序的任何其他形式中的任何内容 - >没有焦点！）。只是要提一下，删除已完成！ sqlite db 中的删除没有问题。

这些字段仍然无法访问 但是如果我最小化 Electron 窗口然后再次最大化它，当我单击“添加”时，这些字段将变得可以访问！！！！ . 此问题仅发生在 Windows 上；该应用程序在 macOS 上完美运行。

我尝试了多种方法来解决此问题，包括：

• 删除后强制聚焦于表单字段
• 重置表格
• 检查可能干扰的事件侦听器
• 登录控制台以跟踪应用程序的行为

这些尝试都没有解决问题。我不明白为什么这种情况只发生在 Windows 上，以及为什么最小化和最大化窗口似乎可以暂时解决问题。 有没有人遇到过类似的问题或者可以建议一种在 Electron 中调试这种特定于平台的行为的方法？

这是我的删除功能的简化版本：

Main.js

ipcMain.handle('deleteTransporter', async (event, id) => {
  const sql = `DELETE FROM transporters WHERE id = ?`;
  return new Promise((resolve, reject) => {
    db.run(sql, [id], function(err) {
      if (err) {
        console.error('Error deleting transporter:', err);
        reject(err);
      } else {
        console.log(`Transporter with ID ${id} deleted.`);
        resolve(this.changes);
      }
    });
  });
});

渲染器.js

// Deletion
window.deleteTransporter = function (id) {
    if (confirm('Are you sure you want to delete this ?')) {
        window.electronAPI.deleteTransporter(id)
            .then(() => {
                showNotification('Deleted successfully', 'success');
                return loadManageData();  // Reload data after submission
            })
            .then(() => {
                enableAllFormFields(); 
                resetFormState();
                rafraichirInterface();
                logFormFieldsState();
            })
            .catch(error => {
                console.error('Deletion error:', error);
                showNotification('Deletion error', 'error');
                rafraichirInterface();  // Refresh UI
            });
    }
};

Renderer.js 中的 loadManageData()

function loadManageData() {
        console.log('loadManageData start');
        
        Promise.all([
            window.electronAPI.getTransporters(),
            window.electronAPI.getDestinations()
        ])
        .then(([transporters, destinations]) => {
            console.log('Data retrieved and reloaded');
            
            updateTransporterList(transporters);
            updateDestinationList(destinations);
            
            console.log('UI updated');
            
            // Force a complete rerender
            ///document.body.style.display = 'none';
            setTimeout(() => {
                document.body.style.display = '';
                console.log('Re-rendu forcé');
                
                // Reactivate all fields
                enableAllFormFields();
                checkEventListeners();
            }, 100);
        })
        .catch(error => {
            console.error('Problem to load data', error);
            showNotification('Problem to load data", 'error');
        });
    }

在 renderer.js 中启用AllFormFields

// Function to reactivate all fields
function enableAllFormFields() {
    console.log('Début de enableAllFormFields');
    const forms = document.querySelectorAll('form');
    forms.forEach((form, formIndex) => {
        const fields = form.querySelectorAll('input, select, textarea, button');
        fields.forEach(field => {
            if (field) {
                field.disabled = false;  // Reactivate all tags and all fields
                console.log(`Activated element: ${field.id || field.name || 'Without name'}, type: ${field.type}`);
            } else {
                console.warn('Element not defined');
            }
        });
    });
    console.log('Fin de enableAllFormFields');
}

Renderer.js 中的 CheckEventListeners

function checkEventListeners() {
    const elements = document.querySelectorAll('button, input, select, textarea');
    elements.forEach(el => {
        el.addEventListener('click', () => console.log(`Click on ${el.id || el.className}`));
        el.addEventListener('focus', () => console.log(`Focus on ${el.id || el.className}`));
    });
}

我认为你的问题在于

deleteTransporter

和/或

loadManageData

函数。

请注意，

loadManageData

正在返回

void

/

undefined

，因为它没有

return

语句。

此外，

deleteTransporter

第一个

.then()

回调正在返回

loadManageData

返回的内容（实际上什么也没有），这可能会阻止下一个

.then()

回调运行。

尝试在

loadManageData

函数中返回 Promise：

function loadManageData()
{
   console.log('loadManageData start');
   
   // EDIT: Added the return statement to the Promise.
   return Promise.all
   ([
      window.electronAPI.getTransporters(),
      window.electronAPI.getDestinations()
   ])
   .then(([transporters, destinations]) =>
   {
      console.log('Data retrieved and reloaded');
      
      updateTransporterList(transporters);
      updateDestinationList(destinations);
      
      console.log('UI updated');
      
      // Force a complete rerender
      ///document.body.style.display = 'none';
      setTimeout(() =>
      {
         document.body.style.display = '';
         console.log('Re-rendu forcé');
         
         // Reactivate all fields
         enableAllFormFields();
         checkEventListeners();
         
      }, 100);
   })
   .catch(error =>
   {
      console.error('Problem to load data', error);
      showNotification('Problem to load data", 'error');
   });
}

或调整

deleteTransporter

功能：

window.deleteTransporter = function (id) {
    if (confirm('Are you sure you want to delete this ?')) {
        window.electronAPI.deleteTransporter(id)
            .then(() => {
                showNotification('Deleted successfully', 'success');
                
                // EDIT: removed the `return` statement from the loadManageData.
                loadManageData();  // Reload data after submission
            })
            .then(() => {
                enableAllFormFields(); 
                resetFormState();
                rafraichirInterface();
                logFormFieldsState();
            })
            .catch(error => {
                console.error('Deletion error:', error);
                showNotification('Deletion error', 'error');
                rafraichirInterface();  // Refresh UI
            });
    }
};

从第一个开始尝试进行一个或多个更正。我真的希望这对你有用。