搜索框组件
特性
- 支持搜索中状态
- 浏览器局部渲染,用户体验好
- 修改地址栏,即使刷新页面,搜索条件不丢失
- 如果当前页码不是首页,搜索后跳转到首页,局部渲染,页面无刷白
- 正在搜索时按钮置灰不允许再次搜索.
依赖
依赖第三方组件use-url-search-params,需要安装该组件依赖
yarn add use-url-search-params
示例
()=>{function Search({ initq, service, onChange }) {const [q, setq] = useState(initq);const [, setParams] = useUrlSearchParams({ q }, { q: String });const [searching, setsearching] = useState(false);async function search() {if (searching) {return;}setsearching(true);try {setParams({ q });const data = await smartfetch(service, 'post', { q });onChange({...data,page: 1,q});} finally {setsearching(false);}}return <><div className='cls001'>{searching ? <div className='cls004'><Loading>Searching...</Loading></div> : <input className='cls002' type='search' autoFocus value={q} placeholder='搜索' onChange={(e) => {setq(e.target.value);}} onKeyPress={(e) => {if (e.nativeEvent.key === 'Enter') {search();}}} />}<input disabled={searching} className='cls003' type='button' value='搜索' onClick={search} /></div><style jsx>{`.cls001{display: flex;justify-content: flex-end;margin: 2rem;}.cls002,.cls003, .cls004{border-radius: 0.4rem;line-height: 1.3rem;}.cls003{color:#fff;background-color: #007fcb;transition: all 600ms;padding: 0.5rem 1rem;}.cls003:hover{background-color: #0081cbc9;}.cls002,.cls004{width: 15rem;}.cls004{border: solid 1px grey;}`}</style></>;}return <Search initq='01factory' service='#' onChange={(e)=>{console.log('value', e);}} />}
完整代码
import router from 'next/router'; import { useUrlSearchParams } from "use-url-search-params"; import { useState } from 'react'; import { Loading } from '@geist-ui/react'; import smartfetch from '@mmstudio/an000058'; import Button from './button'; export interface IProps<T> { page: number; count: number; data: T[]; q: string; } /** * Search with page number in query */ export default function Search<T>({ initq, pagesize, service, onChange }: { initq: string; pagesize: number; service: string; onChange(v: IProps<T>): void; }) { const [q, setq] = useState(initq); const [, setParams] = useUrlSearchParams({ q }, { q: String }); const [searching, setsearching] = useState(false); async function search() { if (searching) { return; } setsearching(true); try { console.log(router); setParams({ ...router.query, q }); const { data, count } = await smartfetch<{ data: T[]; count: number; }>(service, 'get', { q, page: 1, pagesize }); onChange({ count, data, page: 1, q }); } finally { setsearching(false); } } return <> <div className='cls001'> {searching ? <div className='cls004'><Loading>Searching...</Loading></div> : <input className='cls002' type='search' autoFocus value={q} placeholder='请输入' onChange={(e) => { setq(e.target.value); }} onKeyPress={(e) => { if (e.nativeEvent.key === 'Enter') { search(); } }} />} <Button disabled={searching} value='搜索' onClick={search} /> </div> <style jsx>{` .cls001{ display: flex; justify-content: flex-end; margin: 1rem; } .cls002, .cls004{ border-radius: 0.4rem; line-height: 1.3rem; padding: 0 0.5rem; width: 15rem; margin-right: 0.5rem; border: solid 1px #e0e0e0; } .cls002:active,.cls002:focus{ border: solid 1px gray; } `}</style> </>; }