【自学React分享】事件处理

事件处理

1.通过onXxx属性指定事件处理函数

 

(1) React使用的是自定义（合成）的事件，而不是原生DOM事件------为了更好的兼容性（注意大小写）

 

　　如：按钮被点击：onClick() 输入框失去焦点：onBlur() 输入框内容变化：onChange() 表单被提交：onSubmit()

 

<input onBlur={this.showDate} ref={this.myRef} type="text" placeholder="失去焦点提示内容"/>

 

 

 

(2)  React中的事件是通过事件委托方式处理的（委托给组件最外层得元素）--为了高效

　　如：在无序标签中，给<ul>身上加上事件，而不是一个个给<li>添加

 

                    <form onSubmit={this.handleSubmit}> 
                      账号：<input ref={c=>this.username=c} type="text" name="username"/>
                      密码：<input ref={c=>this.password=c} type="password" name="password"/>
                      <button>登录</button>      
                    </form>

 

2.可以一定程度减少ref的使用

（1）当发生事件的元素刚好是要操作的元素j，可以通过event.target得到事件的DOM元素对象。如下：

showDate=()=>{
                alert(event.target.value)
            }

 

 需要注意的地方：

onChange() 等属性一定要给一个函数做为回调，例如

<form onSubmit={this.handleSubmit}> 

为什么这个时候不能加小括号？

因为若为

<form onSubmit={this.handleSubmit()}> 

等号右边的就是一个值，是直接调用函数的值给了onSubmit

 非要加小括号呢？也可以，但是要让函数调用后的返回值是一个函数。