表单组件
React中的表单组件大致可分为两类
受控组件
-
非受控组件
受控组件
简单来说就是它的值由React进行管理,而非受控组件
的值则由原生DOM进行管理
受控组件
例如一个单行文本框
<input type="text" value={this.state.inputValue} onChange={this.handleChange}/>
{/*省略部分代码*/}
handleChange:function (e){
this.setState({
inputValue:e.target.value
})
}
这段代码不难看出,这个文本框的value
是由this.state.inputVlaue
来决定的。同时这个组件也被绑定了一个onChange
事件处理函数,当这个文本框中的值发生改变时,会触发onChange
事件,onChange
事件会调用this.setState
函数将文本框的值赋值给this.state.inputValue
。看起来似乎有点多此一举,其实这就是受控组件最大的特点,它的值严格来说是由this.state.inputValue
决定的,也就是被这个onChange
所管理。
基于受控组件的这个原理,我们可以简单实现类似于AngularJS的双向数据绑定
var MyComponents=React.createClass({
getInitialState:function (){
return{
inputValue:""
}
},
render:function (){
return (
<div>
<input type="text" value={this.state.inputValue} onChange={this.handleChange}/>
<p>Hello {this.state.inputValue} !</p>
</div>
)
},
handleChange:function (e){
this.setState({
inputValue:e.target.value
})
}
});
双向数据绑定
使用
React Developer Tools
调试这个demo,会发现当文半框输入内容之后会引起State
的改变,文本框本身的value属性以及下方的p标签的值也会随着改变。
非受控组件
非受控组件
就很简单了,还是以这个文本框为例
<input type="text" defaultValue="hello!"/>
其实就是把原本的value
属性写为defaultValue
并且不将它与state
绑定,React完全不管理值的输入过程,实际开发过程中还是强烈建议使用受控组件,它可以更方便的管理表单组件
事件系统
React对原生的事件系统也进行了封装,在React中的事件对象实际上是一个跨浏览器的虚拟事件对象
。它拥有和原生事件对象相同的属性和方法,例如阻止事件冒泡stopPropagation()
以及阻止默认事件preventDefault()
,不同的是这个事件对象不存在兼容性问题,可以放心使用。如果有特殊需求,要取得浏览器原生事件对象,则可以使用nativeEvent
属性来获取。
还是上面这个例子:
{/*省略部分代码*/}
handleChange:function (e){
var ev=e.nativeEvent;
this.setState({
{/*这样写也是完全没有问题的*/}
inputValue:ev.target.value
})
}
在React中绑定事件时,事件名必须以驼峰命名法来写,例如onclick事件需要写成
onClick
,onmouseover需要写成onMouseOver
等等...
关于React支持的一些事件可以在官方文档查询 事件系统
网友评论