主要用于: Input Select Radio Switch 等

    1. import { useState, useCallback } from 'react';
    3. /** 默认为 value */
    4. type EventValueType<T = any> = 'value' | 'checked' | ((evt: T) => void) | boolean;
    6. function getValueByType(evt: any, type?: EventValueType) {
    7.   /** 适用于: Input  Checkbox */
    8.   if (type === 'value' || type === 'checked') {
    9.     return evt.target[type];
    10.   }
    12.   /** Switch */
    13.   if (typeof type === 'boolean') {
    14.     return type ? evt.target.value : evt;
    15.   }
    17.   if (typeof type === 'function') {
    18.     return type(evt);
    19.   }
    21.   /** Tabs Select */
    22.   return evt;
    23. }
    25. const useChange = <T, E = any>(defaultValue?: T, type?: EventValueType<E>) => {
    26.   const [value, setValue] = useState(defaultValue);
    28.   const onChange = useCallback(
    29.     (evt) => {
    30.       const val = getValueByType(evt, type);
    31.       setValue(val);
    32.     },
    33.     [value],
    34.   );
    36.   const reset = useCallback(() => {
    37.     setValue(defaultValue);
    38.   }, [defaultValue]);
    40.   return [value as T, onChange, { reset, setValue }] as const;
    41. };
    43. export default useChange;