在表单钩子中反应自定义更改事件处理程序

Question

我编写了一个自定义 React 钩子来处理暴露表单字段状态和更改处理程序工厂的表单。它适用于文本输入，但我需要折射代码以支持公开 (uintptr_t) px == (uintptr_t) py 以外的更改事件的输入；以 CapitalInput 的处理程序为例。如果可能，我想避免暴露底层的 uintptr_t 函数。

一个可能的解决方案是让暴露的 React.ChangeEvent<HTMLInputElement> 接受第二个获取值的参数，但我不确定如何实现它以及它是否是最佳解决方案。

setFields

Answer 1

使用泛型

 function handleChange<T extends HTMLElement>(key: keyof FormState) {
    // e: any could work here but I would like to avoid that if possible
    return (e: React.ChangeEvent<T>) =>
      setFields((fields) => ({ ...fields, [key]: e.target.value }));
  }