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

问题描述

我有一个反应电子应用程序，我想为其添加ctrl + f功能。我添加了一个全局快捷方式，该快捷方式响应ctrl + f并显示一个文本框，然后在文本框上为它提供了一个侦听器，用于监听window.find（）的更改。
不幸的是，它永远不会在页面中搜索，它总是返回false。我假设这与react组件有关，是否可以搜索并突出显示页面上所有组件的文本？

I have a react electron application and I want to add ctrl+f functionality to it. I added a globalshortcut that responds to ctrl+f and shows a text box, then on the textbox, I gave it a listener for changes which calls window.find().Unfortunately this never searches in the page, it always returns false. I'm assuming this has something to do with the react components, is there a way to search and highlight text of all the components on the page?

代码：

  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));
}

推荐答案

我发现并感觉到就像一个完整的白痴一样：
in main.js

I figured this out and feel like a complete idiot:In 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);
 }
}

这篇关于如何在单页reactjs / electron应用程序中搜索文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！