如何將 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

I suggest implement an eventListener within a useEffect hook, when someone press 'ctrl + f' it changes your Search component state, and a function with a map function that return what you're searching and highlith it, applying a span with a class that使其發生。 這可能會幫助你： https://www.npmjs.com/package/react-highlight-words

使用 ReactJS 突出顯示文本我希望它有所幫助