创建交互式视图

到目前为止，您已经构建了一个多页的应用程序，允许您查看所有产品并添加新产品。以下教程将引导您构建编辑产品的功能。在此期间，您将学会：

1. 从一个组件访问另一个组件的状态
2. 编写查询语句以更新产品
3. 对单个事件执行多个操作

访问组件之间的属性 #

您已经建立了一个页面来查看所有产品，并建立了另一个页面来添加新产品。我们现在来继续编辑产品的第三个功能。让我们在表格的每一行中添加一个编辑按钮。单击编辑按钮后，将打开一个表单，允许用户编辑产品。

1. 打开Products_Table的属性窗口
2. 单击数据列下的新建一列
3. 点击新列的设置图标⚙️
4. 将数据列配置的数据类型更改为按钮
5. 在按钮属性下将按钮文本修改为编辑

您将在每行的最后一列看到一个编辑按钮。让我们来配置编辑按钮。

1. 打开Products_Table的属性
2. 通过单击数据列下的设置图标⚙️
3. 从onClick的菜单中选择打开弹窗
4. 在弹窗名称下选择新建弹窗
5. 将新的弹窗重命名为EditProductModal
6. 选择弹窗大小为大弹窗
7. 将弹窗的标题重命名为Edit Product

单击任意行的编辑按钮。您将看到弹框是一个空表单。让我们用组件填充表单：

• 让它看起来与前面讲到的AddProductForm一样
• 其属性的配置方式与AddProductForm相同

完成此操作后，EditProductModal将如下所示：

请注意，像AddProductForm一样， EditProductModal中的所有表单字段都是空的。但是，要编辑产品，您需要预先填充要更新的产品的值。这意味着：

• ProductNameInput应显示所选行的productName值
• MrpInput应该显示所选行的mrp值
• CategoryDropdown应显示所选行的值

让我们配置以上所有内容。

设置ProductNameInput的默认值：

1. 打开ProductNameInput属性窗口
2. 将默认文本设置为{{Products_Table.selectedRow.productName}}
3. 验证解析值是否与所选行中的值一致

请注意，由于组件的范围仅限于其父页面，因此组件仅与同一页面内定义的其他组件、查询语句和 API 共享其属性。

例如，在这种情况下，表格Products_Table的属性selectedRow只能被页面ProductListPage中的其他组件、查询语句和 API 访问。表格Products_Table的属性selectedRow无法被页面AddProductPage的任何组件、查询语句或 API 访问。

要在另一个页面上访问组件的属性或 API、查询语句的结果，有两种方法：

1. 使用storeValue函数将数据存储在浏览器缓存中，以便即使用户移动到应用程序中的另一个页面也可以访问它。

2. 将数据作为查询参数传递到您将用户重定向到的页面的 URL 中。这可以使用navigateTo函数来完成。

现在让我们为MrpInput设置一个默认值：

1. 打开MrpInput的属性窗口
2. 将默认文本设置为{{Products_Table.selectedRow.mrp}}
3. 验证解析值是否与所选行中的值一致

要为 CategoryDropdown 设置默认值：

1. 打开CategoryDropdown的属性窗口
2. 将默认选中设置为{{Products_Table.selectedRow.category}}
3. 验证解析值是否与所选行中的值一致

验证当您单击某行的编辑按钮时，您的表单将填充所选行的值。

编写更新数据的查询语句 #

您的表单将包含用户填写的值。您想通过查询语句插入这些值。让我们看看如何做到这一点：

1. 导航到页面ProductListPage，点击数据源旁的+

2. 选择Mysql Mock DB数据库，点击新建查询

3. 将查询重命名为UpdateProduct

4. 复制粘贴以下内容

   UPDATE products SET
       productName = {{ProductNameInput.text}},
      category = {{CategoryDropdown.selectedOptionValue}},
      mrp = {{MrpInput.text}}
    WHERE id = {{Products_Table.selectedRow.id}};

点击事件配置多个操作 #

用于更新产品的查询语句已准备就绪。下面将该语句绑定到EditProductModal的提交按钮上。

1. 打开EditProductModal中的提交按钮的属性窗口
2. 将按钮文字重命名为提交
3. 在动作属性的onClick中点击执行查询
4. 选择UpdateProduct
5. 转到onSuccess
6. 点击执行查询，选择ProductQuery
7. 转到onError
8. 选择显示消息
9. 将提示消息设置为产品更新失败！
10. 将提示类型设置为失败

尝试编辑产品，然后单击提交按钮以验证它是否有效。您会在左上角看到成功或者错误通知，但表单在提交后仍保持打开状态。让我们配置它以在更新成功时关闭表单。如果出现错误，您将保持表单打开以进行进一步编辑。

要将多个操作绑定到按钮点击事件，让我们编写一些 JavaScript：

1. 点击提交按钮的动作属性onClick旁的JS开关
2. 里面的字段转换为JS代码
3. 将其设置为

{{
  UpdateProduct.run(
  () => {
    ProductsQuery.run();
    closeModal('EditProductModal')
  }, 
  () => 
  showAlert('产品更新失败！','error'))
}}

这里的代码表示在onSuccess里执行里以下操作：

• 执行ProductsQuery查询
• 关闭弹窗

请注意，由于这些操作是异步运行的，因此它们都是并行运行的。尝试再次编辑产品，并验证表单提交是否按预期工作。

完成了页面的设计后，您可以点击右上角的提交按钮进行预览。