React事件处理方法

一、注意事项

1.React元素的事件处理和Dom元素很相似，但是有一点语法的不同

2.React事件的命名采用小驼峰的命名方式，而不是纯小写（camelCase）

3.使用JSX语法时你需要传入一个函数作为事件处理函数，而不是一个字符串

 例如：

在传统HTML的dom中：

<button onclick="click()"></button>

但在React中略有不同(不可以加圆括弧)

<button onClick={click}></button>

二、在函数组件中的使用方法

函数组件：在函数组件中的使用比较简单，在组件中定义函数组件，然后注意onclick以及普通函数要用小驼峰命名。

function FunctionMethod(){
return(
    <div>
    <button onClick={onButtonClick}>点击</button>
    </div>
)

}
function onButtonClick(){
    console.log('你用函数组件kiss,kiss');
}

export default FunctionMethod;

三、在类组件中的使用方法 

类组件 ：在类组件中事件事件处理函数在类组件的实例对象上，所以在onclick以及处理函数要小驼峰明明以外，还要注意的是调用事件处理对象的时候要用this取到实例对象找到处理方法。

import React from "react";
class Classmethod extends React.Component{
constructor(props){
    super(props);
    this.state={

    };
}
onButtonClick(){
    console.log('你用类组件diss我了')
}
render(){
    return(
        <div>
          <button onClick={this.onButtonClick}>（类）点击</button>
        </div>
    );
}
    
}
export default Classmethod;

四、事件处理函数如何获取事件对象

事件发生时，事件处理函数会执行，同时接受到事件对象为参数

onKeyUp(event){
if(event.which == 13){
    console.log(event.target.value);
}
}
render(){
    return(
        <div>
          <button onClick={this.onButtonClick}>（类）点击</button>
          <input type="text"  onKeyUp={this.onKeyUp } />
        </div>
    );
}

五、this绑定值

当我们在类组件中，写的事件处理函数，他的this是undefined，所以我们需要将其赋值，在constructor中写入这样一行代码给this改绑定地址，不能用call和apply,因为更改以后会直接执行，不符合我们预期想要的

 this.onButtonClick=this.onButtonClick.bind(this);

 六、给事件处理函数传入除事件对象以外的其他参数（套外壳）

当我们需要给事件处理函数传入除事件对象以外的其他参数的时候，我们需要在调用的时候给事件处理函数套一个箭头函数，即如下代码

onPrint(text,ev){
     console.log(text);
console.log(ev);
};
render(ev)
{
  return <button onClick={()=>{this.onPrint('haha',ev)}}>点我输出</button>}

注：参数按照顺序依次对应，只有作为事件处理函数地实例方法的this被重置为undefined值，通过bind绑定this指向