0997cd9992
- SearchBar: 移除"查询"按钮，简化交互 - SearchBar: 选择股票后直接触发搜索跳转 - useCompanyStock: handleSearch 支持直接传入股票代码参数 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
// 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;
|