42、前端应用事件处理函数详解

前端应用事件处理函数详解

在前端开发中，事件处理函数起着至关重要的作用，它们能够响应用户的各种操作，实现交互功能。下面将详细介绍几个常见的事件处理函数及其实现逻辑。

1. handleChanges() 函数

const handleChanges = (changedFields, allFields): void => {
  const changedFieldName: string = changedFields[0].name[0];
  const locationOfPipe: number = changedFieldName.indexOf("|");
  if (locationOfPipe !== -1) {
    const aid: any = { ...addIngredientData };
    aid[changedFieldName.substring(locationOfPipe + 1)] = changedFields[0].value;
    setAddIngredientData(aid)
  }
};

这个函数会在表单中任何字段发生变化时触发。其主要目的是记录用户在添加食材字段中输入的内容。具体步骤如下：
1. 获取发生变化的字段名称。
2. 检查该名称中是否包含管道字符 | 。
3. 如果包含，则克隆 addIngredientData 对象。
4. 使用 substring() 方法获取管道字符后面