feat: 添加 useCompanyStock 股票代码管理
This commit is contained in:
90
src/views/Company/hooks/useCompanyStock.js
Normal file
90
src/views/Company/hooks/useCompanyStock.js
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
// src/views/Company/hooks/useCompanyStock.js
|
||||||
|
// 股票代码管理 Hook - 处理 URL 参数同步和搜索逻辑
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
import { DEFAULT_STOCK_CODE, URL_PARAM_NAME } from '../constants';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 股票代码管理 Hook
|
||||||
|
*
|
||||||
|
* 功能:
|
||||||
|
* - 管理当前股票代码状态
|
||||||
|
* - 双向同步 URL 参数
|
||||||
|
* - 处理搜索输入和提交
|
||||||
|
*
|
||||||
|
* @param {Object} options - 配置选项
|
||||||
|
* @param {string} [options.defaultCode] - 默认股票代码
|
||||||
|
* @param {string} [options.paramName] - URL 参数名
|
||||||
|
* @param {Function} [options.onStockChange] - 股票代码变化回调 (newCode, prevCode) => void
|
||||||
|
* @returns {Object} 股票代码状态和操作方法
|
||||||
|
*/
|
||||||
|
export const useCompanyStock = (options = {}) => {
|
||||||
|
const {
|
||||||
|
defaultCode = DEFAULT_STOCK_CODE,
|
||||||
|
paramName = URL_PARAM_NAME,
|
||||||
|
onStockChange,
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
|
||||||
|
// 从 URL 参数初始化股票代码
|
||||||
|
const [stockCode, setStockCode] = useState(
|
||||||
|
searchParams.get(paramName) || defaultCode
|
||||||
|
);
|
||||||
|
|
||||||
|
// 输入框状态(未确认的输入)
|
||||||
|
const [inputCode, setInputCode] = useState(stockCode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听 URL 参数变化,同步到本地状态
|
||||||
|
* 支持浏览器前进/后退按钮
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
const urlCode = searchParams.get(paramName);
|
||||||
|
if (urlCode && urlCode !== stockCode) {
|
||||||
|
setStockCode(urlCode);
|
||||||
|
setInputCode(urlCode);
|
||||||
|
}
|
||||||
|
}, [searchParams, paramName, stockCode]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行搜索 - 更新 stockCode 和 URL
|
||||||
|
*/
|
||||||
|
const handleSearch = useCallback(() => {
|
||||||
|
const trimmedCode = inputCode?.trim();
|
||||||
|
|
||||||
|
if (trimmedCode && trimmedCode !== stockCode) {
|
||||||
|
// 触发变化回调(用于追踪)
|
||||||
|
onStockChange?.(trimmedCode, stockCode);
|
||||||
|
|
||||||
|
// 更新状态
|
||||||
|
setStockCode(trimmedCode);
|
||||||
|
|
||||||
|
// 更新 URL 参数
|
||||||
|
setSearchParams({ [paramName]: trimmedCode });
|
||||||
|
}
|
||||||
|
}, [inputCode, stockCode, paramName, setSearchParams, onStockChange]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理键盘事件 - 回车键触发搜索
|
||||||
|
*/
|
||||||
|
const handleKeyPress = useCallback((e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
}, [handleSearch]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 状态
|
||||||
|
stockCode, // 当前确认的股票代码
|
||||||
|
inputCode, // 输入框中的值(未确认)
|
||||||
|
|
||||||
|
// 操作方法
|
||||||
|
setInputCode, // 更新输入框
|
||||||
|
handleSearch, // 执行搜索
|
||||||
|
handleKeyPress, // 处理回车键
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useCompanyStock;
|
||||||
Reference in New Issue
Block a user