useEventTarget

作用

常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装，支持自定义值转换和重置功能

原理

监听表单的 onChange 事件，拿到值后更新 value 值，更新的逻辑支持自定义

源码

import { useCallback, useState } from 'react'
import useLatest from '../useLatest'
import { isFunction } from '../utils'

interface EventTarget<U> {
  target: {
    value: U
  }
}

export interface Options<T, U> {
  initialValue?: T
  transformer?: (value: U) => T
}

function useEventTarget<T, U = T>(options?: Options<T, U>) {
  // 配置项
  const { initialValue, transformer } = options || {}
  // 保存当前值
  const [value, setValue] = useState(initialValue)

  // 保存转换函数
  const transformerRef = useLatest(transformer)

  // 重置函数
  const reset = useCallback(() => setValue(initialValue), [])

  // 监听 onChange 事件
  const onChange = useCallback((e: EventTarget<U>) => {
    // 获取当前值
    const _value = e.target.value
    // 如果有转换函数，执行转换函数
    if (isFunction(transformerRef.current)) {
      return setValue(transformerRef.current(_value))
    }
    // no transformer => U and T should be the same
    // 如果没有转换函数，直接设置值
    return setValue(_value as unknown as T)
  }, [])

  return [
    value,
    {
      onChange,
      reset,
    },
  ] as const
}

export default useEventTarget