React.js 官网资料摘记：事件处理

事件处理

事件绑定方式不同

直接对比一下传统html页面与React的区别：

<button onclick="handleClick()">
    点击按钮
</button>

<button onClick={()=>this.handleClick()}>
    点击按钮
</button>

阻止默认行为

class ActionLink extends React.Component{
  handleClick(event){
    event.preventDefault();
  }
  render(){
    return (
      <a href="#" onClick={(event)=>this.handleClick(event)}>
        link
      </a>
    );
  }
}
ReactDOM.render(
  <ActionLink />,
  document.getElementById("root")
);

这里我做一下总结，关于render中如何调用自定义函数以及对应的自定义函数的编写：

函数形式

function Clock(props){
    function handleClick(event){
        event.preventDefault();
    }
    return (
        <a href='#' onClick={handleClick}>
            点击后不跳转
        </a>
    );
}

组件定义方式

class Clock extends React.Component{
    handleClick(event){
        event.preventDefault();
    }
    render(){
        return (
            <a href='#' onClick={(event)=>this.handleClick(event)}>
            点击后不跳转
            </a>
        );
    }
}

这种方法是可行的，但是不被建议使用。推荐使用下面这两种形式：

形式１：

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.handleClick=this.handleClick.bind(this);
    }
    handleClick(){
        var name=event.target.name;
        alert(name);
    }
    render(){
        return (
            <button onClick={this.handleClick} name='hello'>
                在handleClick中不需要传入event对象也能直接使用
            </button>
        );
    }
}

上面使用了一句：this.handleClick=this.handleClick.bind(this)，是把该Clock对象传递进handleClick函数中，所以才能直接调用event。

形式２：

class Clock extends React.Component{
    handleClick=()=>{
        var name=event.target.name;
        alert(name);
    }
    render(){
        return(
            <button name='hello' onClick={this.handleClick}>
                格式略显复杂
            </button>
        );
    }
}

handle=()=>{}这样的形式，至于原因，则好像是因为=>，这个单箭头函数，单箭头函数的语法如下：

(param1,param2,param3)=>{statements}

按照这样的思路，那么就是把整个handleClick=()作为参数传递进了=>{}中。