React learning --- event handling

React Learning - Event Handling

1. Event binding

// onClick={function(){}}
// onClick={()=>{}}
// onClick={this.handleClick}

requires attention:

1. The event name must conform to the camel case

2. The event value must be bound to a function, namely {handleClick}, and cannot be in the string form "handleClick"

3. Can be an anonymous function

2. Event object

run=(event)=>{
    
    
 alert( event.target ) //获取 dom 节点
}
render(){
    
    
 return(
 <div>
 <button aid="123" onClick={
    
    this.run}>事件对象</button>
 </div>
 )
} 

3. Event method parameter passing

When passing new parameters to a method, the original parameters of the method will be sorted after the new parameters.

run=(param, event)=>{
    
    
 alert( param , event.target ) //获取 dom 节点
}
render(){
    
    
 return(
 <div>
 <div aid="123" onClick={
    
     ()=>{
    
     this.run(100) } }>登陆</div>
 </div>
 )
} 

Pass parameters:

 onClick={
    
    function(){
    
      }}

onClick={
    
    ()=>{
    
     }}

 onClick={
    
    ()=>{
    
     this.handleClick(index) }}

4.this points to the problem

Under what circumstances will this be a problem?

In the scene with a callback function, this may be wrong. The conventional solutions include arrow functions and bind to change the direction of this

4.1. Rebind in constructor or render

constructor(props){
    
    
 super(props);
 this.state = {
    
    }
 this.login.bind(this);
}
<div onClick={
    
     this.login() }>登陆</div>

4.2. Arrow functions

onClick={
    
    ()=>{
    
    }}

4.3. Inline defined events use bind to bind this

onClick={
    
    function(){
    
    }.bind(this)}

onClick={
    
    this.handleClick.bind(this)}

5. Synthetic Events

All events bound by react are not native events, but encapsulate native events and synthesize events: Compatibility processing and middle layer

​ If too many event handlers are bound to the DOM, the entire page response and memory usage may be affected. In order to avoid the abuse of such DOM events and to shield the event system differences between different underlying browsers, React implements an intermediate layer - SyntheticEvent.

​ When the user is adding a function for onClick, React does not bind the Click time to the DOM.

​ Instead, listen to all supported events at the document. When an event occurs and bubbles to the document, React encapsulates the event content to the middle layer SyntheticEvent (responsible for all event synthesis)

​ So when the event is triggered, use the unified distribution function dispatchEvent to execute the specified function.

Note: Do not mix native events (addEventListener) with React synthetic events, the two mechanisms are different

6. Event types supported by React

Keyboard event onKeyDown onKeyPress onKeyUp

Focus event onFocus onBlur

Form event onChange onInput onSubmit

鼠标事件 onClick onContextMenu onDoubleClick onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onMouseEnter onMouseLeave onDrag

Select event onSelect

Touch event onTouchCancel onTouchEnd onTouchMove onTouchStart

UI event onScroll

Animation event onAnimationStart onAnimationEnd onAnimationIteration

Image event onLoad onError

Media Events onPause onPlay onCanPlay onLoadStart onProgress

Clipboard event onCopy onCut onPaste