React中如何将多个onChange函数重构为单个函数

通用 onChange 函数 #

把重复的字段修改逻辑合并成一个通用函数，利用输入框的name属性动态指定要修改的字段：

const changeItemField = (event: any, id: string) => {
  const { name, value } = event.target;
  const newItems = [...items];
  const item = newItems.find((item) => item.id === id);
  
  if (item) {
    item[name] = value;
    setItems(newItems);
  }
};

修改后的输入框代码 #

所有输入框复用同一个changeItemField函数，只需保证输入框的name属性与要修改的item字段名一致：

<input 
  type='text' 
  name="name" 
  className='item-info-text' 
  placeholder='物品名称' 
  maxLength={255} 
  value={item.name} 
  onChange={(e) => changeItemField(e, item.id)}
/>
<input 
  type='text' 
  name="description" 
  className='item-info-text' 
  placeholder='物品描述' 
  maxLength={255} 
  value={item.description} 
  onChange={(e) => changeItemField(e, item.id)}
/>

优化说明 #

• 无需再编写仅字段名不同的重复函数，新增输入框时只要name属性匹配item字段，就能直接复用通用函数
• 增加if (item)判断，避免找不到对应id的条目时出现报错，提升代码健壮性
• 保留原有数组浅拷贝逻辑，符合React状态更新的不可变要求

内容的提问来源于stack exchange，提问作者Jan Kamoń