web前端高级React - React从入门到进阶之React事件处理

痛定思痛。 2023-01-03 04:49 101阅读 0赞

### 系列文章目录 ###

[第一章：React从入门到进阶之初识React][React_React]  
[第一章：React从入门到进阶之JSX简介][React_JSX]  
[第三章：React从入门到进阶之元素渲染][React]  
[第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤][React_JSX_DOM_DOM]  
[第五章：React从入门到进阶之组件化开发及Props属性传值][React_Props]  
[第六章：React从入门到进阶之state及组件的生命周期][React_state]  
[第七章：React从入门到进阶之React事件处理][React_state]  
[第八章：React从入门到进阶之React条件渲染][React_React 1]

### 文章目录 ###

*   *   *  系列文章目录
         *  一、事件处理
         *  二、向事件处理程序传递参数

### 一、事件处理 ###

> React 元素的事件处理和DOM元素的很相似，但也有一点语法上的不同：
> 
>  *  React事件的命名采用的是小驼峰（camelCase），而不是纯小写
>  *  使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个字符串

*  传统的HTML：

<button onclick="activateLasers()">click</button>

*  React元素

<button onClick={activateLasers}>click</button>

> 在Reac中还有另外一个不同的地方就是：我们不能通过返回false的方式来阻止事件的默认行为。必须得通过显示调用preventDefault来阻止。

*  传统HTML

<a href="#" onclick="console.log('The link was clicked.'); return false">
      Click me
    </a>

*  React组件

>  *  上面代码中handleClick方法中的参数e是一个合成事件，React是根据W3C规范来定义这些合成事件的，所以我们不必担心浏览器的兼容性问题。
>  *  使用 React 时，一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。事实上，只需要在该元素初始渲染的时候添加监听器即可。
>  *  当使用 ES6 class 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。例如，下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮：
> 
>     class Toggle extends React.Component { 
>      constructor(props) { 
>        super(props);
>        this.state = { isToggleOn: true};
>     
>        // 为了在回调中使用 `this`，这个绑定是必不可少的
>        this.handleClick = this.handleClick.bind(this);
>      }
>     
>      handleClick() { 
>        this.setState(state => ({ 
>          isToggleOn: !state.isToggleOn
>        }));
>      }
>     
>      render() { 
>        return (
>          <button onClick={ this.handleClick}>
>            { this.state.isToggleOn ? 'ON' : 'OFF'}
>          </button>
>        );
>      }
>     }
>     
>     ReactDOM.render(
>      <Toggle />,
>      document.getElementById('root')
>     );
> 
> 这里最需要注意的是在类组件中定义的方法中的this指向问题
> 
>  *  在类组件的生命周期函数中，比如render、componentDidMount等，this默认指向的是当前React组件的实例，我们可以直接使用this，因为React默认会去调用这些方法
>  *  但是在类组件中我们自己定义的方法中的this就不一定指向的是当前组件的实例了。
>     
>      *  因为我们自己定义的方法一般多为元素的事件绑定方法，而我们在给事件绑定这些方法时，并没有触发方法的执行，而是要等到元素被点击（或其它事件）后才会触发方法的执行，而这时调用方法的实际是这个被点击的元素，所以this指向可能就不是React组件的实例了
>      *  如果想让自定义方法中的this还是指向当前组件的实例，有如下三种方法可以实现
>         
>          *  1.通过bind方法改变this指向来实现 this.方法名.bind(this)
>          *  2.在定义方法时用箭头函数的方式定义，因为箭头函数中的this在定义时就已经确定了； 方法名 = ()=>\{\}
>          *  3.在给元素绑定事件时先绑定一个箭头函数，然后在箭头函数中调用自定义的方法执行
> 
> 下面我们用代码来一一演示一下：

*  自定义方法handleClick中的this为undefined

class LoggingButton extends React.Component { 
      handleClick(){ 
        console.log('this is:', this);//this为undefined
      }
    
      render() { 
        return (
          <button onClick={ this.handleClick}>
            Click me
          </button>
        );
      }
    }

*  利用bind改变函数中的this指向，同时也可以传递其它参数

class LoggingButton extends React.Component { 
      handleClick(){ 
        console.log('this is:', this);
      }
    
      render() { 
        return (
          <button onClick={ this.handleClick.bind(this,arg1,arg2...)}>//这里利用bind改变this指向
            Click me
          </button>
        );
      }
    }

*  直接将handleClick定义为箭头函数

class LoggingButton extends React.Component { 
      handleClick = () => { 
        console.log('this is:', this);//this指向当前组件的实例
      }
    
      render() { 
        return (
          <button onClick={ this.handleClick}>
            Click me
          </button>
        );
      }
    }

*  先给元素绑定一个箭头函数，然后在箭头函数中调用方法执行

class LoggingButton extends React.Component { 
      handleClick(){ 
        console.log('this is:', this);
      }
    
      render() { 
        return (
          <button onClick={ () => {  this.handleClick() } }>
            Click me
          </button>
        );
      }
    }

### 二、向事件处理程序传递参数 ###

> 在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：
> 
>     <button onClick={ (e) => this.deleteRow(id, e)}>Delete Row</button>
>     <button onClick={ this.deleteRow.bind(this, id)}>Delete Row</button>
> 
> 上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。  
> 在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

[React_React]: https://blog.csdn.net/lixiaosenlin/article/details/112238757
[React_JSX]: https://blog.csdn.net/lixiaosenlin/article/details/112250656
[React]: https://blog.csdn.net/lixiaosenlin/article/details/112252554
[React_JSX_DOM_DOM]: https://blog.csdn.net/lixiaosenlin/article/details/111993181
[React_Props]: https://blog.csdn.net/lixiaosenlin/article/details/112260171
[React_state]: https://blog.csdn.net/lixiaosenlin/article/details/112314897
[React_React 1]: https://blog.csdn.net/lixiaosenlin/article/details/112361974