ReactJS - 05 - ReactJS之入门之03之事件 Event 处理

阅读更多

ReactJS - 05 - ReactJS之入门之03之事件 Event 处理

一、事件处理代码（写法一）：

二、事件处理代码（写法二）：

三、事件处理代码（写法三）：

当需要向 onClick 函数传递参数时，需要以下写法：

创建一个新的 arrow 回调函数，以绑定 this，并传参。


注意：
使用本写法有个问题就是每次 Toggle 渲染的时候都会创建一个新的回调函数。
如果不向 onClick 函数 传参，请避免使用本写法。


1、组件内部：传参

 this.deleteRow(id, e)}>Delete Row
Delete Row

    参数 e 作为 React 事件对象将会被作为第二个参数进行传递。

deleteRow(id, e){    //事件对象e要放在最后
    e.preventDefault();
    alert(id);
}

2、组件嵌套：props 传参

function Square(props) {  
  return (
        
                 {props.value}  
        
  );  
}  
  
class Board extends React.Component {  
    
  renderSquare(i) {  
    return (  
      // 创建一个新的 arrow 回调函数，以绑定 this，并传参。
       this.props.onClick(i)}  
       />  
    );  
  }  
  
  render() {  
    return (  
      
  
        
  
          {this.renderSquare(0)}  
          {this.renderSquare(1)}  
          {this.renderSquare(2)}  
        
      
  
    );  
  }  
}  

3、例子

引用：

https://reactjs.org/docs/handling-events.html


在线演示






转载请注明，
原文出处：http://lixh1986.iteye.com/blog/2429536




















-