入坑React系列三

事件处理

• react事件绑定属性的命名采用驼峰式写法
• jsx语法传入一个函数作为事件处理函数
• 不能使用返回 false 的方式阻止默认行为,因该这样写：

function ActionLink(){
    function handleClick(e){
        e.preventDefault();
        console.log('jghj');
    }
    
    return(
        <a href="#" onClick={handleClick}>click</a>    
    )
}

一个实际的例子：

class Toggle extends React.Component{
  constructor(props){
    super(props);
    this.state = {isToggle:true};
  
  }
  handleClick(){
    this.setState(prevState =>({
      isToggle: !prevState.isToggle
    }));
  } 
  
  
  render(){
    return(
      <button onClick={this.handleClick}>{this.state.isToggle?'ON':'OFF'}</button>
    )
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

不出意外上述写法会报错，为什么呢？因为this的指向问题!!类的默认方法是不会绑定this的，所以这个时候this的值会是undefined。如何更改呢？ 往下看：

1. 第一种方法：bind方法原地绑定，改变this的指向：

<button onClick={this.handleClick.bind(this)}>{this.state.isToggle?‘ON’:‘OFF’}

这种方法写起来简单，但是很明显每次执行bind函数都会生成一个新函数，势必会有很大的开销。

2. 第二种方法：在constructor中提前对事件进行绑定，即：

constructor(props){
    super(props);
    this.state = {isToggle:true};
    
    this.handleClick.bind(this);       //这里这里
    
  }

3. 第三种方法：通过箭头函数，即：

<button onClick={e=>this.handleClick(e)}>{this.state.isToggle?‘ON’:‘OFF’}

在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

4. 第四种方法：将事件改写为箭头函数，即：

handleClick=(e)=>{
    e.preventDefault();
    this.setState(prevState =>({
        isToggle: !prevState.isToggle
    }));
}
    

---

向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>  //作为参数显示传递
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> //绑定bind隐患式传递

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