You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f23a868536c07da991b1d4e773161e25",
"translation_date": "2025-08-24T00:14:55+00:00",
"source_file": "7-bank-project/4-state-management/assignment.md",
"language_code": "zh"
}
-->
# 实现“添加交易”对话框
## 说明
我们的银行应用程序仍然缺少一个重要功能:输入新交易的功能。
使用您在前四节课中学到的所有内容,来实现一个“添加交易”对话框:
- 在仪表板页面添加一个“添加交易”按钮
- 可以创建一个带有 HTML 模板的新页面,或者使用 JavaScript 显示/隐藏对话框的 HTML, 而无需离开仪表板页面( 您可以使用 [`hidden` ](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden ) 属性或 CSS 类来实现)
- 确保处理好对话框的[键盘和屏幕阅读器的可访问性](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
- 实现一个 HTML 表单以接收输入数据
- 从表单数据创建 JSON 数据并发送到 API
- 使用新数据更新仪表板页面
查看 [服务器 API 规范 ](../api/README.md ),了解需要调用的 API 以及预期的 JSON 格式。
以下是完成任务后的示例结果:

## 评分标准
| 标准 | 卓越 | 合格 | 需要改进 |
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| | 完全按照课程中看到的所有最佳实践实现了添加交易功能。 | 实现了添加交易功能,但未完全遵循课程中看到的最佳实践,或者功能仅部分工作。 | 添加交易功能完全无法正常工作。 |
** 免责声明**:
本文档使用AI翻译服务 [Co-op Translator ](https://github.com/Azure/co-op-translator ) 进行翻译。尽管我们努力确保翻译的准确性,但请注意,自动翻译可能包含错误或不准确之处。应以原文档的原始语言版本为权威来源。对于关键信息,建议使用专业人工翻译。我们对因使用此翻译而引起的任何误解或误读不承担责任。