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