)
}
}
```
上面添加两个了 input 标签，第一个 input 使用 name 数据, 第二个 input 使用 isBoy 数据。同时我们也先指定两个 input 的 onChange 处理函数。
注意：如前面章节所提及，对于 imState 布尔值，请记得使用显式布尔值方式：`checked={state.isBoy == true}`。
接下来看看如何实现两个 onChange 处理函数：
```javascript
class BasicInfoView extends PureComponent {
...
handleNameChange(e){
state.basicInfo.name = e.target.value
store.sync() // 编辑中的输入框，需手动同步store
}
handleIsBoyChange(e){
state.basicInfo.isBoy = e.target.checked
}
...
}
```
非常熟悉和简单！你只需把更新的值赋给目标state节点即可。我们会发现多了个 `store.sync() `，这个函数是让 pastate 立刻执行数据同步更新。由于很多输入法会在输入过程中会把带下划线的 “拼音字母” 输入到 input 中，如下：
如果 pastate 执行异步更新会使带下划线 “拼音字母” 中断，因此我们在更新 **编辑中的输入框** 时，需要简单地使用 `store.sync() ` 执行同步更新，让 “拼音” 连续。如果不是对 **编辑中的输入框** 进行修改或不需要支持输入法输入（如密码等），无需使用 `store.sync() ` 。
初步完成！我们试着往输入框输入文字，或点击勾选框, 可以看到文字区域的值与 input 区域的视图都正常地进行更新！
与普通 react 表单的处理模式一样，我们可以通过 onChange 函数的实时控制输入的内容，如转化大小写、控制字符串长度等：
```javascript
class BasicInfoView extends PureComponent {
...
// 把输入值都转化为大写
handleNameChange_uppercase(e){
state.basicInfo.name = e.target.value.toUpperCase()
store.sync()
}
// 控制文本长度在10个字符以内
handleNameChange_limitedLength(e){
if(e.target.value.length > 10) return；
state.basicInfo.name = e.target.value
store.sync()
}
...
}
```
## 使用 pastate 双向绑定输入组件
使用过 vue.js 或 angular.js 的人都体验过自动双向数据绑定 (two-ways data binding) 的便捷性，但由于 react state 渲染的单向数据流原则，在 react 中没有默认提供这个功能。而 pastate 的 imState 具有保存节点信息的特殊性，能够很容易实现自动双向数据绑定功能！
pastate 为你提供了四个已实现双向数据绑定的高阶表单组件 (Higher Order Component, 通常简称 HOC) ，这些组件都是基于 PureComponent 实现的，具有良好的渲染性能，你可以尽情享用他们！这四个表单组件如下：
- `Input` : 文本框
- `Checkbox` : 复选框
- `RadioGroup` : 单选框选项组
- `Select` : 下拉选择框
### Input 文本框
Input 组件可以用于显示单行输入框和多行输入框，只需要传入要绑定的值，当你通过界面更改输入框的值时，Input 组件会自动为你更新所绑定的 state ：
```javascript
import { ..., Input } from 'pastate'
...
render(){
let state = this.props.state
return(
...