8、打造 React Bootstrap 个人联系人管理器：全面指南

打造 React Bootstrap 个人联系人管理器：全面指南

1. React 中 HTML 元素关键字替换

在 React 里，由于 for 和 class 是 JavaScript 关键字，所以在使用标签和输入元素时，不能直接用它们。React 采用 htmlFor 替换 for ，用 className 替换 class 。这暗示着这些 HTML 元素是副本，和实际元素用途类似。

2. 利用绑定简化值的更新

现代框架常使用绑定来避免手动更新输入或触发事件。绑定的原理是框架在 UI 元素和代码（如属性）间建立连接，监测底层值的变化，检测到变化就触发更新。正确使用绑定能减少代码编写的繁琐，降低错误率。

3. 提供用于绑定的状态

在 React 中绑定的关键是有一个要绑定的状态。对于创建要在屏幕上显示的数据，状态可以是一个描述所需属性的接口。以单个联系人为例，状态如下：

export interface IPersonState {
  FirstName: string,
  LastName: string,
  Address1: string,
  Address2: StringOrNull,
  Town: string,
  County: string,
  PhoneNumber: string;
  Postcode: string,
  Da