3.8. React event handling

发布时间 ： 2025-10-25 13:34:30 UTC      

Page Views: 40 views

React element event handling and DOM elements are similar. But there is one grammatical difference:

  • React event binding properties are named in hump style rather than lowercase.

  • If you use the syntax of JSX, you need to pass in a function as an event handler instead of a string (DOM element)

HTML is usually written as follows:

<button onclick="activateLasers()">
  Activate button
button>
   
   React   written in Chinese is as follows: 
 
 
 
<button onClick={activateLasers}>
  Activate button
button>
   
 In   React   the other difference is that you can’t use return   false   to prevent the default behavior, you must explicitly use the   preventDefault   . 
 
 For example, we usually block links from opening a new page by default in HTML, which can be written as follows: 
 
 
 
<a href="#" onclick="console.log('click the link'); return false">
  Click me
a>
   
 In   React   is written as follows: 
 
 
 
functionActionLink(){functionhandleClick(e){e.preventDefault();console.log('click the link');}return(<ahref="#"onClick={handleClick}>
Click me a>);}
   
 In the instance   e   is a synthetic event. 
 
 Use   React   usually you don’t need to use   addEventListener   add a listener to a created DOM element. You only need to provide a listener when the element is initially rendered. 
 
 When you use ES6 class syntax to define a component, the event handler becomes a method of the class. For example, the following   Toggle   component renders a button that allows the user to toggle the switch state: 
 
 
  3.8.1.  Example  
 
 
 
classToggleextendsReact.Component{constructor(props){super(props);this.state={isToggleOn:true};//Binding here is necessary, so
\`this\`
Can only be used in callback functions. this.handleClick=this.handleClick.bind(this);}handleClick(){this.setState(prevState=>({isToggleOn:
!prevState.isToggleOn}));}render(){return({this.state.isToggleOn?'ON':'OFF'});}}ReactDOM.render(,document.getElementById('example'));
   
 You have to be careful with the JSX callback function   this   the method of the class is not bound by default   this   of. If you forget to bind   this.handleClick   and pass it in.   onClick   when you call this function   this   the value will be   undefined   . 
 
 This is not a special behavior of React; it is part of how the function runs in JavaScript. Usually, if you don’t add to the method   ()   , for example   onClick={this.handleClick}   you should bind for this method   this   . 
 
 If you use the   bind   it bothers you. There are two ways to solve it. If you are using the experimental property initializer syntax, you can use the property initializer to bind the callback function correctly: 
 
 
 
classLoggingButtonextendsReact.Component{//This grammar ensures that \`this\`
Bind to handleClick
in//This is just a test handleClick=()=>{console.log('this
is:',this);}render(){return(Clickme);}}
   
 If you don’t use the property initializer syntax, you can use the arrow function in the callback function: 
 
 
 
classLoggingButtonextendsReact.Component{handleClick(){console.log('this
is:',this);}render(){//This grammar ensures that \`this\` Bind to handleClick
in return(<buttononClick={(e)=>this.handleClick(e)}>Clickmebutton>);}}
   
 The problem with using this syntax is that every time   LoggingButton   a different callback function is created when rendering. In most cases, this is fine. However, if this callback function is passed into lower-level components as an attribute value, those components may be re-rendered additionally. We usually recommend binding in the constructor or using attribute initializer syntax to avoid such performance problems. 
 
 
 Pass parameters to the event handler  
 
 Usually we pass additional parameters to the event handler. For example, if   id   it was you who wanted to delete that line.   id   can pass parameters to the event handler in either of the following ways 
 
 
 
<button onClick={(e) => this.deleteRow(id, e)}>Delete Rowbutton>
<button onClick={this.deleteRow.bind(this, id)}>Delete Rowbutton>
   
 The above two methods are equivalent. In the above two examples, the parameters   e   as   React   the event object will be passed as the second parameter. Through the arrow function, the event object must be explicitly passed, but through the   bind   event objects and more parameters will be passed implicitly. 
 
 It is worth noting that through   bind   method to pass parameters to the listener function, the listener function defined in the class component, and the event object e should be arranged after the passed parameter, for example: 
 
 
 
classPopperextendsReact.Component{constructor(){super();this.state={name:'Hello
world!'};}preventPop(name,e){//Event object e should be placed last e.preventDefault();alert(name);}render(){return(


hello
{/\*pass through bind()
Method passes parameters.\*/}Click
);}}
      
                    
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            3.8. React event handling 
                        

                    

                

            
        
        

            

    
        

            

                

                    
                        
                        
                            
Principles and Applications of WebGIS 

                        
                        
                             37
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Web框架 

                        
                        
                             942
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
WEB基础 

                        
                        
                             287
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Principles, Technologies, and Methods of Geographic Information Systems 

                        
                        
                             102
                        
                    
                    
                        

                            
 
 
 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.