3.8. React event handling

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

Page Views: 9 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 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289