如何将像Ctrl+F这样的搜索功能赋予react.js中的搜索输入

Question

我有一个Admin.js文件，其中有所有的子组件和一个搜索输入，我想给它提供像Ctrl+F这样的搜索功能。因此，如果用户在这个搜索输入中键入任何输入，那么它将突出显示我认为onKeyUp将工作的单词。

在这个文件中，我有所有的组件。

我是Admin.js

<nav>
       {/* <!-- Search --> */}
              <div className="navbar-nav align-items-center">
                <div className="nav-item d-flex align-items-center">
                  <i className="bx bx-search fs-4 lh-0"></i>
                  <input
                    type="text"
                    className="form-control border-0 shadow-none"
                    placeholder="Search..."
                    aria-label="Search..."
                  />
                </div>
              </div>
        {/* <!-- /Search --> */}
</nav>

           <Routes>
              <Route path="/" element={<Dashboard_panel />} />
              <Route path="/customer-details" element={<CustomerDetails />} />
              <Route path="/product-details" element={<ProductDetails />} />
              <Route path="/billing-details" element={<Billing />} />
              <Route path="/receipt-form" element={<ReceiptForm />} />
              <Route path="/bill-preview" element={<BillPreview />} />
              <Route path="/customer-ledger" element={<CustomerLedger />} />
              <Route path="/expense-details" element={<ExpenseForm />} />
              <Route path="/cash-book" element={<CashBook />} />
              <Route path="/company-account" element={<Account_Company_Balance />} />
            
            </Routes>

我如何实现这一逻辑，请帮助我。谢谢。。

Answer 1

我建议在一个eventListener钩子中实现一个useEffect，当某人按下'ctrl + f‘它会改变您的搜索组件状态，以及一个带有映射函数的函数，该函数返回您正在搜索的内容并对其进行高级别处理，并应用一个span和一个使其发生的类。这也许能帮到你：https://www.npmjs.com/package/react-highlight-words

Highlight text using ReactJS我希望它能帮上忙