React-----事件在无状态和有状态组件的使用

一、在无状态的使用

注意:函数(无状态)组件里面不需要this调用函数

1.直接调用方法

	function addNum(){
		console.log(111)
	}
	//调用
	<h2 onClick={addNum}>点击增加数量{num}</h2>

2.间接调用(这是使用了Hook)

const [num,setNum]=useState(0)

function addNum(){
	setNum(num+1)
}

//通过调用addNum来调用setNum
<h2 onClick={addNum}>点击增加数量{num}</h2>

3.箭头函数调用(在有Hook中)

const [num,setNum]=useState(1)
const [age,setAge]=useState(18)

//通过箭头函数
<h2 onClick={()=>{setNum(num=>num+1)}}>{num}</h2>
<h2 onClick={()=>{setAge(age=>age+1)}}>{age}</h2>

二、在有状态组件调用方法

注意:要加this去调用
定义事件与constructor同级

1.{this.方法名.bind(this)}调用

addList(){
	console.log(111)
}

// 定义事件,这段代码与this.state同级
this.addList=this.addList.bind(this)

//调用
<button onClick={this.addList}>添加</button>	

2.箭头函数

ccc(){
		console.log(111)
}
<button onClick={()=>this.ccc()}>测试</button>