如何在单页 reactjs/electron 应用程序中搜索文本

How do I search text in a single page reactjs/electron application

我有一个 React Electron 应用程序,我想为其添加 ctrl+f 功能。我添加了一个响应 ctrl+f 并显示文本框的全局快捷方式,然后在文本框上,我给它一个调用 window.find() 的更改侦听器。 不幸的是,这永远不会在页面中搜索,它总是 returns 错误。我假设这与反应组件有关,有没有办法搜索和突出显示页面上所有组件的文本?

代码:

  mainWindow.on('focus', () => {
    globalShortcut.register('CmdorCtrl+F', () => {
      mainWindow.webContents.send('find_request', 'search');
    });
});
   ipcRenderer.on('find_request', (event, arg) => {
 const modalbox = document.getElementById('modalbox');
 if (modalbox.style.display === 'block') {
   modalbox.style.display = 'none';
 } else {
    modalbox.style.display = 'block';
 }
});
searchPage(event) {
  console.log(event)
  console.log(window.find(event.value));
}

我明白了这一点,感觉自己像个彻头彻尾的白痴: 在main.js

mainWindow.webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate) {
  mainWindow.webContents.stopFindInPage('keepSelection');
}
});
ipcMain.on('search-text', (event, arg) => {
  mainWindow.webContents.findInPage(arg);
});

在页面中:

static searchPage(event) {
if (event.target.value.lenght > 0) {
    ipcRenderer.send('search-text', event.target.value);
 }
}

为了给你一个替代方案,有一些组件可以为你做这件事,所以你不需要自己构建它。 遇到了同样的问题,首先使用 electron-in-page-search 解决了这个问题,但是这个组件在 Electron 2 或更高版本上无法正常工作。

然后终于发现electron-find解决了我的问题。与 Electron 4 一起使用。

您只需将组件添加到您的项目中:

npm install electron-find --save

在您的 Electron 主进程中添加一个全局快捷方式,以便在 ctrl+f 中将事件发送到渲染器:

globalShortcut.register('CommandOrControl+F', () => {
    window.webContents.send('on-find');
});

然后您可以将其添加到您的页面(呈现器进程)

const remote = require('electron').remote;
const FindInPage = require('electron-find').FindInPage;

let findInPage = new FindInPage(remote.getCurrentWebContents());

ipcRenderer.on('on-find', (e, args) => {
  findInPage.openFindWindow()
})

希望对您有所帮助。