如何为多组件内的input输入框设置默认调用的自定义处理函数？

方案1：封装通用自定义Input组件（最推荐，适配所有框架，维护成本最低） #

把公共逻辑收敛到统一组件里，需要调用removeComma的输入框直接使用该组件即可，无需重复写逻辑。
React实现示例：

// 封装通用Input组件
const CommonInput = ({ needRemoveComma = false, onChange, ...restProps }) => {
  // 你的原有removeComma逻辑
  const removeComma = (val) => val.replace(/,/g, '')

  const handleChange = (e) => {
    let currentVal = e.target.value
    // 开启配置则先执行格式化
    if (needRemoveComma) {
      currentVal = removeComma(currentVal)
      e.target.value = currentVal
    }
    onChange?.(e)
  }

  return <input onChange={handleChange} {...restProps} />
}

业务组件用法：
需要走removeComma逻辑的输入框加needRemoveComma属性即可，其他用法和原生input完全一致：

// 要处理逗号的输入框
<CommonInput
  needRemoveComma
  onChange={myChange}
  value={myValue}
  placeholder="输入内容自动去除逗号"
/>
// 不需要处理的输入框正常使用
<CommonInput onChange={myChange} value={myValue} />

优势：侵入性极低，不需要修改原有业务逻辑，后续要新增其他输入框公共处理逻辑也可以直接在该组件内扩展。

方案2：全局事件监听/自定义指令（适合不想改动现有input标签的场景） #

React 实现 #

给需要处理的input加自定义属性，全局监听input事件自动执行逻辑：

// 项目入口文件添加全局监听
document.addEventListener('input', (e) => {
  if (e.target.tagName === 'INPUT' && e.target.dataset.removeComma === 'true') {
    e.target.value = e.target.value.replace(/,/g, '')
    // 手动触发change事件保证上层原有逻辑正常执行
    e.target.dispatchEvent(new Event('change', { bubbles: true }))
  }
})

用法：直接给目标input加自定义属性即可：

<input
  data-remove-comma="true"
  onChange={myChange}
  value={myValue}
/>

Vue 实现 #

可以注册全局自定义指令：

// 全局注册v-remove-comma指令
Vue.directive('remove-comma', {
  bind(el) {
    el.addEventListener('input', () => {
      el.value = el.value.replace(/,/g, '')
    })
  }
})

用法：

<input v-remove-comma @change="myChange" :value="myValue" />

方案3：高阶函数包装onChange（适合零散少量输入框场景） #

如果只有少数输入框需要处理，不想封装组件，可以直接用高阶函数包装原有onChange：

const withRemoveComma = (onChange) => {
  return (e) => {
    e.target.value = e.target.value.replace(/,/g, '')
    onChange(e)
  }
}

用法：

<input onChange={withRemoveComma(myChange)} value={myValue} />

内容的提问来源于stack exchange，提问作者S.M_Emamian