41、食谱编辑功能实现解析

食谱编辑功能实现解析

1. 编辑与添加食谱触发逻辑

当点击编辑食谱时，会将 isEditVisible 局部状态变量设置为 true ，这会触发重新渲染，此时 RecipesEdit 组件会进行条件渲染，弹出编辑食谱的对话框。

当点击“添加食谱”按钮时，会调用 handleAdd() 函数：

const handleAdd: MouseEventHandler = (): void => {
  setEditMode("Add Recipe");
  setRecipeID(-1);
  setIsEditVisible(true);
};

由于按钮的使用和渲染方式，该函数的类型必须为 MouseEventHandler 。使用 -1 作为食谱 ID，以便对话框后的代码能区分是编辑还是添加操作。

2. 食谱编辑模态对话框结构

2.1 界面布局

• 顶部有几个字段用于输入食谱的名称、描述、评分（1 - 5 星）和可供多少人食用。
• 下方是食材列表部分，有三个字段用于输入食材名称、数量和单位，旁边的加号图标可将其添加到下方列表中。若添加了食材，旁边会有减号图标用于移除食材，但已添加的食材不可编辑。

2.2 代码实现

2.2.1 导入相关