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)
  }
};

这个函数与表单的 onFieldsChange 属性相关联，每当表单中的任何字段发生变化时，它就会被触发。其主要目的是记录用户在添加配料字段中输入的内容，具体步骤如下：
1. 获取发生变化的字段名称。由于 changedFields 是一个数组，我们通常关注的是其第一个元素。
2. 检查字段名称中是否包含竖线（ |