23、前端开发与机器学习：从 React 到 Vue 和 TensorFlow 的实践之旅

前端开发与机器学习：从 React 到 Vue 和 TensorFlow 的实践之旅

1. React 中添加人员时选择地址的实现

1.1 功能概述

当用户添加人员时，只需输入名字和姓氏，系统会显示一个选择框，其中包含之前输入的地址列表。下面我们来看看如何使用 React 处理这种复杂场景。

1.2 组件创建

需要创建两个独立的组件：
- AddPerson 组件：用于输入名字和姓氏。
- AddressChoice 组件：用于检索并显示完整的地址列表供用户选择。

1.3 AddressChoice 组件实现

1.3.1 自定义属性接口

interface IAddressProperty {
  CurrentSelection : (currentSelection:IAddress | null) => void;
}

1.3.2 组件定义

export class AddressesChoice extends React.Component<IAddressProperty, Map<string, string>> {
}

1.3.3 加载地址方法