From 833d28d1eedda39c03fd7e89efe27dc8f7ac010d Mon Sep 17 00:00:00 2001
From: troyeguo <13820674+troyeguo@users.noreply.github.com>
Date: Sat, 2 May 2026 17:30:13 +0800
Subject: [PATCH] refactor: replace deprecated refs with React.createRef in
 SearchBox component

---
 src/components/searchBox/component.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/searchBox/component.tsx b/src/components/searchBox/component.tsx
index 0791b2c1..175d54d7 100644
--- a/src/components/searchBox/component.tsx
+++ b/src/components/searchBox/component.tsx
@@ -6,11 +6,13 @@ import ConfigUtil from "../../utils/file/configUtil";
 import BookUtil from "../../utils/file/bookUtil";
 
 class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
+  private searchBoxRef: React.RefObject<HTMLInputElement>;
   constructor(props: SearchBoxProps) {
     super(props);
     this.state = {
       isFocused: false,
     };
+    this.searchBoxRef = React.createRef<HTMLInputElement>();
   }
   componentDidMount() {
     if (this.props.isNavSearch) {
@@ -19,7 +21,7 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
     }
   }
   handleMouse = async () => {
-    let value = (this.refs.searchBox as any).value;
+    let value = this.searchBoxRef.current?.value || "";
     if (this.props.isNavSearch) {
       value && this.search(value);
     }
@@ -63,7 +65,7 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
     if (event.keyCode !== 13) {
       return;
     }
-    let value = (this.refs.searchBox as any).value;
+    let value = this.searchBoxRef.current?.value || "";
     if (this.props.isNavSearch || this.props.isReading) {
       value && this.search(value);
     }
@@ -115,7 +117,7 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
       <div style={{ position: "relative" }}>
         <input
           type="text"
-          ref="searchBox"
+          ref={this.searchBoxRef}
           className="header-search-box"
           onKeyDown={(event) => {
             this.handleKey(event);