如何编写适配所有输入类型的TypeScript通用onChange函数

问题复现 #

原有通用处理函数代码：

function getValue(e: ChangeEvent<HTMLInputElement>) {
  let { value, type, checked } = e.target;

  if (type === "number") {
    return parseInt(value, 10);
  }
  if (type === "checkbox") {
    return checked;
  }

  return value;
}

function handleChange(e: ChangeEvent<HTMLInputElement>) {
  const { name } = e.target;

  setInputs({ ...inputs, [name]: getValue(e) });
}

该函数绑定到<select>元素时触发类型不匹配报错，将参数修改为HTMLInputElement | HTMLSelectElement联合类型后，访问checked属性又触发属性不存在的报错，目标是实现单函数兼容所有表单控件的change事件。

修复代码 #

import { ChangeEvent } from 'react';

// 统一所有原生表单控件的元素类型
type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

function getValue(e: ChangeEvent<FormControlElement>) {
  const target = e.target;
  // 通过类型守卫收窄范围，仅checkbox/radio类input访问checked属性
  if (target instanceof HTMLInputElement && ['checkbox', 'radio'].includes(target.type)) {
    return target.checked;
  }
  if (target.type === 'number') {
    return parseInt(target.value, 10) || 0; // 可根据需求调整空值兜底逻辑，避免返回NaN
  }
  return target.value;
}

function handleChange(e: ChangeEvent<FormControlElement>) {
  const { name } = e.target;
  // 用函数式更新规避闭包陈旧状态问题
  setInputs(prev => ({
    ...prev,
    [name]: getValue(e)
  }));
}

关键逻辑说明 #

• 类型定义层面，把三类原生表单控件（输入框、下拉选择、多行文本框）合并为联合类型，兼容所有原生表单元素的事件类型要求，不会再出现select绑定事件的类型不匹配报错
• 取值逻辑用instanceof做类型守卫，TypeScript会自动识别当前target的类型范围，只有确定是input元素且是复选/单选类型时才读取checked属性，彻底解决属性不存在的类型报错
• 数字类型输入的解析建议加空值兜底，避免输入为空时parseInt返回NaN导致后续逻辑异常
• state更新用函数式写法，避免异步更新时闭包引用旧state的问题

内容的提问来源于stack exchange，提问作者Justin van Dijk