@jdfed/hooks

babelform 通用 hooks

useClickOne

• 控制按钮只能点击一次

Usage

import React, { useState } form 'react
import { useClickOne } from '@jdfed/hooks'
import { Button } from 'antd'

const Demo = () => {

  const _setCount = useClickOne(() => {
    /*
    * 做些操作
    */
  }, [])

  return (
    <>
      <Button onCLick={_setCount}></Button>
    </>
  )
}

useEventCallback

• 重写 useCallback（保证函数即使 dependencies 依赖改变。也不会重新生成） 解决因为 useCallback 的依赖频繁变化导致 useCallback 缓存效果很差甚至影响性能的问题 fn 函数 dependencies 依赖数组

Usage

import React, { useState } form 'react
import { useEventCallback, useField } from '@jdfed/hooks'
import { Button } from 'antd'

const Demo = (fieldData) => {
  const [initValue, setValue] = useState(fieldData)
  const _onChange = useField(
    { fieldKey, onChange, options: { isUploader: true } },
    dispatch
  )
  change = useEventCallback(() => {
    (value) => {
      setValue(value)
    }
  }, [_onChange])
  return (
    <>
      <Input onChange={change} />
    </>
  )
}

useField

• 将表单数据保存为不可变数据

Usage

useField({ fieldKey , onChange , options })

useModal

• 设置 modal 的展示隐藏

Usage

import React, { useState } form 'react
import { useModal } from '@jdfed/hooks'
import { Modal } from 'antd'

const Demo = () => {
  const [defaultStatus] = useState(false)
  const [visible] = useModal(defaultStatus)
  return (
    <>
      <Modal visible=(visible)/>
    </>
  )
}

usePrevious

• 返回上一次的 value 值

Usage

import React, { useState } form 'react
import { usePrevious } from '@jdfed/hooks'

const Demo = () => {
  const [defaultStatus] = useState(false)
  //上一次value的值
  const preValue = usePrevious(defaultValue)
  return (
    <div>{value}</div>
  )
}

useQuery

• 查询表单数据

Usage

cosnt queryOptionsFuc = useQuery({}, dispatch)

useRefProp

• 当 callback 依赖过多时，使用 useRefProp 防止 onCLick 事件多次生成

Usage

import {useRefProp} from 'hooks/index'
      const MyComponent = ()=> {
        const ref = useRefProp()
        const onClick = useRefProp(()=>{ const {a,b,c,d}=ref.current click事件 },[])
        return <div onClick={onClick}>
      }

useValidate

• 实时校验表单数据

Usage

const validate = () => {
  ......
  ......
  return {
    pass,
    errors,
    errorsMap,
    formData: newFormData,
  }
}

const validateDebounce = useValidate(validate)