React中TextField onChange事件如何同时传递ID与值 减少手动传参冗余

方案1：封装自定义TextField包装组件（推荐，适配大规模项目） #

该方案只需做一次封装，全局替换原有TextField组件即可解决数百个组件的冗余写法问题，改造量极小。

1. 封装公共TextField组件：

// 引入项目中原用的TextField组件
import { TextField as OriginalTextField } from '你的UI库引入路径';

const MyTextField = (props) => {
  const { id, onChange, ...restProps } = props;
  // 内部自动绑定id与输入值的关联逻辑
  const innerChangeHandle = (value) => {
    onChange?.(value, id);
  };
  return <OriginalTextField {...restProps} id={id} onChange={innerChangeHandle} />
};

2. 原有处理函数无需修改：

const handleFieldChange = (value: any, name: string) =>
  setFields({
    ...fields,
    [name]: value,
  });

3. 组件调用写法简化为：

<MyTextField id="test" label="Test" onChange={handleFieldChange} defaultValue="Test" />

全局搜索替换原有TextField为MyTextField即可完成所有存量组件的改造，后续新增组件也无需再写冗余的箭头函数包裹逻辑。

方案2：通过原生事件对象读取id（适用可获取完整事件的场景） #

如果你使用的UI库的TextField onChange回调实际支持传入完整事件对象（仅之前的用法有误），可以直接修改处理函数：

const handleFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { id, value } = e.target;
  setFields({
    ...fields,
    [id]: value
  });
};

组件调用直接绑定即可：

<TextField id="test" label="Test" onChange={handleFieldChange} defaultValue="Test" />

方案3：柯里化处理函数（轻量改造可选） #

如果不想封装组件，也可以改造处理函数为柯里化写法，简化调用时的代码：

const handleFieldChange = (name: string) => (value: any) => {
  setFields(prev => ({
    ...prev,
    [name]: value
  }));
};

调用写法：

<TextField id="test" label="Test" onChange={handleFieldChange('test')} defaultValue="Test" />

内容的提问来源于stack exchange，提问作者SigsDuks