如何在react.js中为搜索输入提供Ctrl+F等搜索功能

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

我建议在useEffect钩子中实现一个eventListener，当有人按下"ctrl+f"时，它会更改您的搜索组件状态，以及一个带有map函数的函数，该函数会返回您正在搜索的内容并对其进行highlith处理，并应用一个带有类的span来实现它。这也许能帮助你：https://www.npmjs.com/package/react-highlight-words

使用ReactJS突出显示文本我希望它能帮助