美文网首页
React入门--表单与事件

React入门--表单与事件

作者: 我的秀 | 来源:发表于2016-08-14 15:03 被阅读363次

    表单组件


    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支持的一些事件可以在官方文档查询  事件系统

    相关文章

      网友评论

          本文标题:React入门--表单与事件

          本文链接:https://www.haomeiwen.com/subject/cjmysttx.html