React事件处理

React事件处理

语法：1.事件绑定的属性采用驼峰式写法。

2. 采用jsx的语法需要传入一个函数作为事件处理函数

<button onClick={activateLasers}>  Activate Lasers</button>

3. 当使用ES6 clss语法定义一个组件时，事件处理器会成为类的一个方法

 

  constructor(props) {

    super(props);

    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback    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'));

 

补充：箭头函数：x => x * x相当于

function (x) {

    return x * x;

}

其实相当于一个匿名函数，简化了函数定义

区别：箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

var obj = {

    birth: 1990,

    getAge: function () {

        var b = this.birth; // 1990

        var fn = function () {

            return new Date().getFullYear() - this.birth; // this指向window或undefined

        };

        return fn();

    }

};

var obj = {

    birth: 1990,

    getAge: function () {

        var b = this.birth; // 1990

        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象

        return fn();

    }

};

obj.getAge(); // 25

注意区别。

 

 

这个例子中  handleClick() {    this.setState(prevState => ({      isToggleOn: !prevState.isToggleOn    }));  

setState接收两个参数prevState和props，之后染回一个新的state

 

像事件处理程序传递参数

id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：

1. 作为参数显式传递：<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

2.隐式传递：<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>