8、React Bootstrap个人联系人管理器开发指南

React Bootstrap个人联系人管理器开发指南

1. React中的特殊元素与绑定

在React中，由于 for 和 class 是JavaScript关键字，在编写标签和输入元素时，不能直接使用它们。React使用 htmlFor 替换 for ， className 替换 class 。这一现象暗示了在React中使用的HTML元素是具有相似功能的副本，而非元素本身。

许多现代框架都采用绑定来简化输入更新和事件触发。绑定的核心思想是框架在UI元素和代码（如属性）之间建立连接，监控底层值的变化，并在检测到变化时触发更新。这样做不仅能减少代码编写的繁琐，还能降低错误率。

2. 提供绑定所需的状态

在React中进行绑定时，需要一个状态与之绑定。对于单个联系人数据的显示，状态可以通过一个接口来描述：

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