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函数，但是由于我们赋值了函数给一个新的对象（就是HTML的DOM元素），导致上下文发生变化，从而找不到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的条件视图渲染

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!