React学习手记3-事件处理

雨田666
270 阅读3分钟

事件绑定

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:

  1. React事件绑定属性的命名采用驼峰式写法，而不是小写。
  2. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
  3. 阻止事件默认行为只能调用e.preventDefault;  而DOM事件还可以使用  return false

例如：

 传统dom事件

<button onclick="activateLasers()">
  Activate Lasers
</button>

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

React事件

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


 function ActionLink() {  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

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

this指向

JSX 中事件绑定的回调函数中，this并不会指向React组件实例。尽管ES6规范中，class类的方法中，this默认指向类的实例，单如果单独使用该方法，this会指向函数调用的上下文。jsx中事件绑定函数，就是单独使用，this并不会指向组建的实例。如何绑定this到组件实例，有如下几种方法：

1. 使用箭头函数，直接在React元素中采用箭头函数定义事件的处理函数，如下：

<button onClick={(e) => {console.log(this.state.number)}}> 点击 </button>

因为箭头函数中this指向的是函数定义是的对象，故保证this总是指向当前组件的实例对象。

但是如果事件处理逻辑较多，这样直接在元素上写，造成代码可读性差，故一般把逻辑封装成组件的一个方法，然后在箭头函数中调用这个方法。

handleClick(event) {
    this.setState({})
}

render(){
    return <button onClick={(e) => {this.handleClick(event)}}> 点击 </button>}

缺点： 直接在render方法中为元素事件定义事件处理函数，每次render调用，都会重新创建一个新的事件处理函数。

2.  使用组件的方法，直接将组件方法赋值给元素的事件属性，同时在类的构造函数中，将这个方法的this绑定到当前对象，如：

class Header extends React.componet {
    constructor (props) {
        super (props)
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() { }
    render() {
        return <button onClick={this.handleClick}> 点击 </button>
     }

3. 还是使用组件的方法，不过是在给元素的时间属性赋值的时候，同时为时间处理函数绑定this，如果需要向处理函数传递额外的参数，这种方式很方便

handleClick(number, event) { 
}
render() {
   return <button onClick={this.handleClick.bind(this,3)}> 点击 </button>
 }

4. ES7的属性初始化语法,自动为class中定义的方法绑定this，如：

handleClick = (event) => { 
}
render() {
   return <button onClick={this.handleClick}> 点击 </button>
 }

参考阮一峰es6书中，19.14.1小节，应该也算是Class的实例属性新的写法

class Myclass {
    myprop = 42;
    consturctor() {
        this.name = "killer"
    }
}

myprop 和 name 都是实例的属性，只是写法不一样

5. ES新提案语法--双冒号语法，不能带参数

  bind5(){
    console.log('bind5', this)
  }

 render() {
   return (
    <div>
       <button onClick={::this.bind5}></button>
    </div>
  )
 }

传参

通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

参考 ： https://react.docschina.org/docs/handling-events.html


avatar
文章
阅读
粉丝