React学习之事件绑定处理机制(五)

前端之家收集整理的这篇文章主要介绍了React学习之事件绑定处理机制(五)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React对于JSX事件处理的方式和DOM元素的事件绑定有点类似,但是有语法上的一些差异。

  • React事件的命名必须是驼峰命名法,不能是小写,和我们写组件是一样的,我们的组件类的首写字母必须大写,不然会出问题,就是说onclick要写成onClick

  • 当我们在JSX语句中绑定事件时,我们不能用字符串,必须用大括号包裹一个函数表达式

区别如下:

//HTML
<button onclick="taddlistener()">
  Activate Lasers
</button>
//React
<button onClick={taddlistener}>
  Activate Lasers
</button>

除了上面说明的那两点,还有一个不同地方,就是在React中无法用return false去阻止事件的默认响应行为,必须用event.preventDefault()

这里还要说的是React中绑定事件时,大括号中必须是一个函数,箭头函数也好,匿名函数也好,反正就是得是一个函数

其中的event事件是根据W3C重新被封装了的,浏览器之间的兼容性大家暂时不需要在意,直接用就OK了。

对于在React中的事件增加我们不能用addEventListener而应该用最初的那些事件绑定方式进行绑定,如下:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 特别注意这一行语句
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
ReactDOM.render(
  <Toggle />,document.getElementById('root')
);

这份代码涉及到ES6类的一些新特性。当我们单单的使用new一个类产生一个对象的话,这个this便是指向new的这个实例对象。但是如果这个this脱离了对象的话,如下:

class Test {
    constructor(){
        this.values = 'tm7';
        //this.view = this.view.bind(this);
    }
    view(){
        this.print();
    }
    print(){
        console.log(this.values);
    }
}

let a = new Test();
a.view();
let b = a.view;
b();

将我注释掉的一行语句给加入,就不会报错

原因

我本来是想调用Test类中的print函数,但是由于我们赋值了函数给一个新的对象(就是HTMLDOM元素),导致上下文发生变化,从而找不到print这个函数。所以我们前面使用this.handleClick函数时需要绑定类Toggle,因为当你将它作为一个DOM事件来处理的时候,会脱离本来Toggle类上下文,所以需要用bind进行锁定函数所在的上下文

当然不只有这么一种方法还处理事件,这里再讲一种:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:',this);
  }

  render() {
    // This Syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}> Click me </button> ); } }

这样的用法就是不让handleClick函数脱离类的实例对象,反而将DOM元素作为参数传到函数中。

接下来的方法请增大眼睛

//另一种,属性初始化语法
class LoggingButton extends React.Component {
  // 此语法只建立在Babel中,不属于ES6语法内容
  handleClick = () => {
    console.log('this is:',this);
  }
  render() {
    return (
      <button onClick={this.handleClick}> Click me </button> ); } }

虽然上述语法在ES6总提到说Babel可以使用,同样React官方文档中也说了可以用,但是是一种实验性语法,可能会在ES7中推出,反正我是用不了,多尴尬呀,所以建议大家用第一种方式是非常好的。

下一篇博客会讲React的条件视图渲染

原文链接:https://www.f2er.com/react/304578.html

猜你在找的React相关文章