reactjs表单元素的应用

input type=”text”

数据：

jsx：

function：

这里相当于实现了vue中的v-model

jsx语法中有个defaultValue的属性，其实就是原生DOM中的value属性

原理：

模型 –> 视图  通过value属性绑定state中的数据，将数据渲染到视图上

视图 –> 模型  通过onChange事件监听视图数据的改变，其实就是监听并获取defaultValue值

并将defaultValue通过setState加载进state中（defaultValue == e.target.value）

数据流程：

initStateData –> valueBind –> initViewData –> viewDataChange –> onChange –> getDefaultValue –> setStateData –> stateDataChange –> valueBind –> viewDataChange

input type=”radio”

数据：

jsx：

function：

input type=”checkbox”

数据：

jsx:

function:

注意这里应用了扩展运算符，作用是复制一个hobbies对象

select>option

数据：

jsx：

function：

效果：