React事件处理、事件的特点、事件语法、React事件处理函数里的this、事件对象、阻止浏览器的默认行为

React事件的特点：

1、React 事件绑定属性的命名采用驼峰式写法，而不是小写。如：onClick。

2、如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法),函数不写小圆括号

3、在 React 中另一个不同是你不能使用return false 的方式阻止默认行为， 你必须明确的使用 preventDefault。

4、事件处理函数里的this是undefined（啊………），如果希望事件处理函数里的this是React组件对象本身，则需要用bind。

事件语法

1、格式

<JSX元素 onClick={this.实例方法|函数体} />

示例：

class Home extends React.Component{
    
fn01() {
  console.log("fn01");
}
    
render(){
  return (
   <div>
     <input type="button" value="测试01" onClick={this.fn01} />
//函数体
     <input type="button" value="测试02" onClick={()=>{console.log("事件绑定箭头函数")}} />
    </div>
  )
}
}

2、事件处理函数里的this

事件处理函数里的this是undefined，如何让事件处理函数里的this是React组件对象本身

一、使用bind
1）、构造器（构造函数）里：this.方法=this.方法.bind(this)  bind改变this指向，FN与THIS，产生新的函数[this.方法.bind(this)]，只要调用新的函数，this就是该对象，（右边赋值给左边，左边习惯写的与右边的同名）、执行性能高
2）、在事件绑定时写，onClick={this.方法.bind(this)}执行性能低

二、使用箭头函数
3）、事件绑定时，使用箭头函数：onClick={()=>this.方法()}执行性能高
4）、定义方法时，直接使用箭头函数: 方法=()=>{箭头函数定义方法}  执行性能低

构造函数执行性能高,因为另一种每次调用render时都要产生新的函数

如：

class MyPerson extends React.Component{
	constructor(props){
		super(props);
		this.state={
			age:12,
			isAdult:"未成年"
		}
		this.changeAge = this.changeAge.bind(this);
	}

	changeAge(){
		………………………………
	}
	//直接使用箭头函数
	changeAge=()=>{
		this指向会找上一级
	}

	render(){
		return (
			<div>
				<input type="button" value="修改年龄" onClick={this.changeAge} />
				<input type="button" value="修改年龄" onClick={()=>{this.changeAge()}} />
				<input type="button" value="修改年龄" onClick={this.changeAge} />
				<p>年龄：{this.state.age}</p>
				<p>年龄：{this.state.isAdult}</p>
			</div>
		);
	}
}

3、事件对象**

event对象是经过react处理过的。

如何获取事件对象------直接声明即可。

实例方法(ev) ev 代理事件对象 ，ev.target 返回真实DOM

事件对象的获取：

1）、直接声明（没有其它参数的情况下）

changeAge1=(ev)=>{
    console.log(ev);
    console.log(ev.target);
}

<input type="button" value="修改年龄2" onClick={(ev)=>this.changeAge1(ev)} />
<input type="button" value="修改年龄2" onClick={this.changeAge1} />

2）、箭头函数里直接声明（有其它参数的情况下）

changeAge2(ev,num){
    console.log(ev);
    console.log(ev.target);
    console.log(num);
}
//注意：给onClick绑定的函数，还是只有一个参数，这个参数就是事件对象，此处在绑定的函数里再调用另外一个函数进行传参
<input type="button" value="修改年龄2" onClick={(ev)=>this.changeAge2(ev,2)} />

注意：给事件属性绑定的函数，永远只会有一个参数，该参数就是事件对象。

4、阻止浏览器的默认行为：

​ 只能用preventDefault，不能在事件函数里使用return false