// 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(''); /** * 监听 URL 参数变化,同步到本地状态 * 支持浏览器前进/后退按钮 */ useEffect(() => { const urlCode = searchParams.get(paramName); if (urlCode && urlCode !== stockCode) { setStockCode(urlCode); setInputCode(urlCode); } }, [searchParams, paramName, stockCode]); /** * 执行搜索 - 更新 stockCode 和 URL * @param {string} [code] - 可选,直接传入股票代码(用于下拉选择) */ const handleSearch = useCallback((code) => { const trimmedCode = code || inputCode?.trim(); if (trimmedCode && trimmedCode !== stockCode) { // 触发变化回调(用于追踪) onStockChange?.(trimmedCode, stockCode); // 更新状态 setStockCode(trimmedCode); // 更新 URL 参数 setSearchParams({ [paramName]: trimmedCode }); } }, [inputCode, stockCode, paramName, setSearchParams, onStockChange]); /** * 处理键盘事件 - 回车键触发搜索 */ const handleKeyDown = useCallback((e) => { if (e.key === 'Enter') { handleSearch(); } }, [handleSearch]); return { // 状态 stockCode, // 当前确认的股票代码 inputCode, // 输入框中的值(未确认) // 操作方法 setInputCode, // 更新输入框 handleSearch, // 执行搜索 handleKeyDown, // 处理回车键(改用 onKeyDown) }; }; export default useCompanyStock;