本文详解如何在 solidjs 中正确实现基于按钮点击（而非实时输入）的表单搜索，包括参数管理、请求触发、加载状态控制、url 同步及类型安全响应处理。
本文详解如何在 solidjs 中正确实现基于按钮点击（而非实时输入）的表单搜索，包括参数管理、请求触发、加载状态控制、url 同步及类型安全响应处理。
在 SolidJS 中，将搜索行为从 onInput 实时触发改为「仅点击按钮提交」，关键在于解耦输入状态与请求执行，并确保状态更新、副作用调度和 UI 渲染协同一致。以下是一个生产就绪的实现方案，兼顾简洁性、可维护性与最佳实践。
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
✅ 核心思路：信号驱动 + 显式调用 + 响应式同步
我们不再依赖 createResource 的自动触发机制（它会在 signal 变化时立即请求），而是改用 createSignal 手动管理查询参数与响应，并通过显式函数调用发起请求。同时，结合 @solidjs/router 的 useSearchParams 实现 URL 参数双向同步，提升用户体验（如刷新保留搜索词、支持分享链接）。
? 完整可运行代码（含类型安全与错误防护）
import { useSearchParams } from '@solidjs/router';
import { Component, Show, createSignal, onMount, onCleanup } from 'solid-js';
// 定义后端响应类型（强类型保障）
export type SearchResponse = {
id: string;
createdAt: string;
uri: string;
content: string;
};
const searchQuery = async (text: string): Promise<SearchResponse[]> => {
// ✅ 正确 URL 编码，避免特殊字符破坏请求
const encoded = encodeURIComponent(text);
const res = await fetch(`http://localhost:7070/search?q=${encoded}`);
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
return res.json();
};
const Search: Component = () => {
// ? 同步 URL 查询参数（如 ?q=hello）
const [searchParams, setSearchParams] = useSearchParams<{ q: string }>();
// ? 管理本地搜索词（初始值来自 URL 或空字符串）
const [query, setSearchQuery] = createSignal(searchParams.q || '');
// ? 响应数据与加载状态（非 Resource，更可控）
const [queryResponse, setQueryResponse] = createSignal<string>('');
const [loading, setLoading] = createSignal(false);
const [error, setError] = createSignal<string | null>(null);
// ? 主搜索逻辑：封装为可复用、可测试的异步函数
const performSearch = async (q: string) => {
if (!q.trim()) return; // 防空搜索
setLoading(true);
setError(null);
try {
const data = await searchQuery(q);
// ✅ 类型安全序列化：JSON.stringify 保证结构清晰，且 TypeScript 已校验 data 类型
setQueryResponse(JSON.stringify(data, null, 2));
// ? 同步更新 URL，支持浏览器前进/后退与分享
setSearchParams({ q });
} catch (e) {
setError(e instanceof Error ? e.message : '搜索失败，请重试');
setQueryResponse('');
} finally {
setLoading(false);
}
};
// ? 表单提交处理器
const handleSubmit = (e: Event) => {
e.preventDefault();
performSearch(query());
};
// ? 页面加载时：若 URL 有 q 参数，自动执行首次搜索
onMount(() => {
if (searchParams.q) {
performSearch(searchParams.q);
}
});
// ? 清理（可选）：如需取消未完成请求，可在 effect 中使用 AbortController（此处略）
// onCleanup(() => { /* abort controller cleanup */ });
return (
<form onSubmit={handleSubmit} class="space-y-4 max-w-md mx-auto p-4">
<div>
<label for="query" class="block text-sm font-medium mb-1">搜索关键词</label>
<input
id="query"
type="text"
value={query()}
onInput={(e) => setSearchQuery(e.currentTarget.value)}
placeholder="输入关键词后点击搜索..."
class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div class="flex gap-2">
<button
type="submit"
disabled={loading()}
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-70 transition"
>
{loading() ? '搜索中...' : '? 搜索'}
</button>
<button
type="button"
onClick={() => {
setSearchQuery('');
setSearchParams({ q: '' }, { replace: true });
setQueryResponse('');
}}
class="px-4 py-2 border rounded hover:bg-gray-50 transition"
>
清空
</button>
</div>
{/* ✅ 加载与错误状态反馈 */}
<Show when={loading()}>
<div class="text-blue-600 flex items-center">
<span class="animate-spin mr-2">⏳</span> 正在搜索...
</div>
</Show>
<Show when={error()}>
<div class="text-red-600 p-3 bg-red-50 rounded">
⚠️ {error()}
</div>
</Show>
{/* ✅ 成功响应展示（格式化 JSON，便于调试） */}
<Show when={!loading() && queryResponse()}>
<pre class="bg-gray-800 text-green-400 p-4 rounded overflow-x-auto text-sm">
{queryResponse()}
</pre>
</Show>
{/* ✅ 空状态提示 */}
<Show when={!loading() && !queryResponse() && !error()}>
<div class="text-gray-500 italic">请输入关键词并点击“搜索”</div>
</Show>
</form>
);
};
export default Search;⚠️ 关键注意事项与最佳实践
- 不要滥用 createResource：它适用于「信号变化即触发请求」场景（如搜索建议）。对于「按钮提交」，手动控制 fetch + createSignal 更清晰、易测试、易中断。
- 务必 URL 编码：使用 encodeURIComponent() 处理用户输入，防止 &, ?, 空格等破坏 URL 结构。
- 错误处理不可省略：网络请求可能失败，try/catch + setError 是基础健壮性保障。
- 状态初始化要谨慎：searchParams.q || '' 避免 undefined 导致意外行为；onMount 中检查 searchParams.q 实现 SSR/首次加载友好。
- 按钮禁用防重复提交：disabled={loading()} 防止用户连点多次发送冗余请求。
- 类型优先：定义 SearchResponse 并在 fetch 返回处标注 Promise<SearchResponse[]>，让 TypeScript 在解构、渲染前就捕获类型错误。
✅ 总结
SolidJS 的响应式本质是「信号驱动视图」，而非「事件驱动流程」。实现按钮搜索的核心在于：
① 用 createSignal 管理受控输入；
② 用普通异步函数封装请求逻辑；
③ 在 onSubmit 中显式调用该函数；
④ 用 Show 和信号组合控制加载/错误/结果 UI。
配合 useSearchParams，你还能轻松实现 URL 可分享、SEO 友好、历史记录完整的搜索体验——这才是 SolidJS 「细粒度响应式」力量的真正体现。
