react hooks 方法 & 组件

wr-use/utils 用法

import { useInputValue } from "wr-use/utils"

useInputValue

type : integer : 正整数 decimals : 保留小数 默认8位 minus : 保留小数位数

type TInputV = string | number;
interface InputConfig {
  type: "trim" | "integer" | "number" | "decimals";
  minus?: number;
  format?: (v: TInputV) => TInputV;
}
export declare function useInputValue(v: TInputV, config?: InputConfig): [TInputV, (e: React.ChangeEvent<HTMLInputElement> | string | number) => void];

import { useInputValue } from "wr-use/utils"
const [demandNum, setDemandNum] = useInputValue<string>("")
const r = <Input value={v} onChange={setV} ></Input>

useFormInput && Antd Form

export declare function useFormInput(
  form: FormInstance, 
  prop: string,
  config: InputConfig
): void;

import { useFormInput } from "wr-use/utils"

const [form] = Form.useForm<FieldType>() 
useFormInput(form, "productCount")

form.setFieldsValue({ a: "3" })

useDebouncePlus 闭包请求回调

interface IDebouncePlusProps<T = any> {
  fn: Fn;
  rFn: Fn<T>;
  errFn?: Fn;
  finalFn?: Fn;
  delay?: number;
}
export declare function useDebouncePlus<T = any>(props: IDebouncePlusProps<T>): Fn<any>;

import { useDebouncePlus } from "wr-use/utils"

const [data, setData] = useState()
const api = useCallback(async (init?: boolean) => {return getList()}, [])
const rApi = useCallback(({ data: dataResult }: Awaited<ReturnType<typeof getDemandList>>) => {
  setData((data) => { 
    return dataResult
  })
}, [])
const apis = useMemo(() => ({ fn: api, rFn: rApi, delay: 1000  }), [api, rApi])
const getList = useDebouncePlus(apis)

useTask

export declare function useTask(
  delay?: number,// default 500 
  type?: 'all' | 'end' // default end 默认执行最后一个函数
): (fn: Fn) => void;

import { useTask } from "wr-use/utils"

const addTaskFn = useTask()
addTaskFn(() => {
  console.log("1")
})
addTaskFn(() => {
  console.log("2")
})
// 2

useDebounce

export declare function useDebounce<T extends (...args: any[]) => any>(fn: T, delay?: number): [T, boolean];

import { useDebounce } from "wr-use/utils"
const payOnClick = useCallback(async () => {
 
}, []);
const [onPayConfirm, payLoad] = useDebounce(payOnClick);
onPayConfirm() // 防抖
payLoad // 是否加载中

usePagination

import { usePagination,useDebounce, } from "wr-use/utils"

const [init] = useDebounce(
  useCallback<TPaginationFn>(([pages,setPages],flat) => {
    console.log(pages,setPages, "分页的数据");
  }, [pageProps]),
);


const [pageProps,setPages, initRef ] = usePagination(init);
// initRef.current!(true)
const r = <Table pagination={pageProps} />