babelform 通用 hooks
- 控制按钮只能点击一次
import React, { useState } form 'react
import { useClickOne } from '@jdfed/hooks'
import { Button } from 'antd'
const Demo = () => {
const _setCount = useClickOne(() => {
/*
* 做些操作
*/
}, [])
return (
<>
<Button onCLick={_setCount}></Button>
</>
)
}
- 重写 useCallback(保证函数即使 dependencies 依赖改变。也不会重新生成) 解决因为 useCallback 的依赖频繁变化导致 useCallback 缓存效果很差甚至影响性能的问题 fn 函数 dependencies 依赖数组
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({ fieldKey , onChange , options })
- 设置 modal 的展示隐藏
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)/>
</>
)
}
- 返回上一次的 value 值
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>
)
}
- 查询表单数据
cosnt queryOptionsFuc = useQuery({}, dispatch)
- 当 callback 依赖过多时,使用 useRefProp 防止 onCLick 事件多次生成
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}>
}
- 实时校验表单数据
const validate = () => {
......
......
return {
pass,
errors,
errorsMap,
formData: newFormData,
}
}
const validateDebounce = useValidate(validate)