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

系列文章目录

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

一、事件处理

React 元素的事件处理和DOM元素的很相似，但也有一点语法上的不同：

• React事件的命名采用的是小驼峰（camelCase），而不是纯小写
• 使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个字符串

• 传统的HTML：

<button onclick="activateLasers()">click</button>
<!--事件名为小写，事件绑定的值是一个函数字符串-->

• React元素

<!--事件名为小驼峰式，事件绑定的值就是一个函数，而不是字符串形式-->
<button onClick={activateLasers}>click</button>

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

• 传统HTML

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

• React组件

function ActionLink() {
    
    
  function handleClick(e) {
    
    
    e.preventDefault();//显示调用preventDefault来阻止
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={
    
    handleClick}>
      Click me
    </a>
  );
}

• 上面代码中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 的方式，事件对象以及更多的参数将会被隐式的进行传递。