8、React开发中的状态绑定与输入验证

React开发中的状态绑定与输入验证

1. React中的特殊属性替换

在React中，当我们使用 label 和 input 元素时，会发现一些特殊的属性。在普通HTML里， label 的正确属性是 for ， input 里用 class 来引用CSS类。但在React中，由于 for 和 class 是JavaScript关键字，React使用 htmlFor 替换 for ， className 替换 class 。这暗示了这些HTML元素是虚拟DOM的副本，而非真实的元素本身。以下是相关代码示例：

<Col><label htmlFor="firstName">First name</label></Col>
<Col><input type="text" id="firstName" className="form-control" placeholder="First name" /></Col>

2. 使用绑定简化值更新

现代框架常使用绑定来避免手动更新输入或触发事件。绑定的原理是框架在UI元素和代码（如属性）间建立连接，监测底层值的