1. 定义类型
- Model :定义了一个通用的模型类型。
- ResultType :定义了 useModel 的返回类型,包含状态值、模型生成函数和状态更新函数。
2. 类型实现
type Model<T> = {value: T | T[keyof T] | any;onChange: (e: any) => void;onInput: (e: any) => void;
};
type ResultType<T> = [T, (attr?: string) => Model<T>, (value: T) => void];
3. useModel 实现思路
- 状态初始化 :使用 useState 初始化状态 value 和更新函数 setValue 。
- 公共更新逻辑 : 当传入 attr 时,更新对象的特定属性;否则,直接更新整个对象。
- 模型生成函数 : model 函数返回一个包含 value 、 onChange 和 onInput 的对象,方便组件使用。
4. useModel Hook 实现
import { useState } from "react"; export const useModel =