react学习笔记4：事件和方法-优快云博客

本文详细介绍了在React中如何为组件绑定事件处理函数，并演示了如何传递参数给这些处理函数。文章通过实例展示了不同类型的事件绑定及其使用方法。

我们已经创建了组件，组件里面包含我们的结构，我们如何在结构上面绑定事件呢？

dom的一大核心处理就是事件处理。

1.组件定义方法

我们如果知道es6的语法，就会知道怎么在类中自定义方法：

//设置组件
class Event extends React.Component {
	fun1(){
		alert(1)
	}
	render() {
	 return <div>点击我</div>;
	}
}

我们的组件event其实就是一个继承react组件的子类，我们直接定义一个fun1方法

2.绑定事件

jsx组件中给标签绑定事件和原生dom操作很像：

//设置组件
class Event extends React.Component {
	fun1(){
		alert(1)
	}
	render() {
	 return <div onClick={this.fun1}>点击我</div>;
	}
}

我们知道rener其实也是类中的一个方法，不过是组件规范好的，我们内部调用某个方法就是this.fun即可，不过在组件中的xml要给方法套在{}中，绑定事件就是原生dom绑定的on+事件名称即可。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
	fun1(){
		alert(1)
	}
	render() {
	 return <div onClick={this.fun1}>点击我</div>;
	}
}


ReactDOM.render(
    <div>
		<Event />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

把组件发射到绑定的根基点即可。

3.绑定各种事件测试

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
	fun1(){
		alert(1)
	}
	fun2(){
		alert(2)
	}
	fun3(){
		alert(3)
	}
	render() {
	 return <div>
	 	<p onClick={this.fun1}>点击事件</p>
		<p onMouseMove={this.fun2}>鼠标移动事件</p>
		<input onFocus={this.fun3} type="text" />
	 </div>;
	}
}


ReactDOM.render(
    <div>
		<Event />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

5.绑定事件传递参数

绑定事件：

onClick={this.fun1.bind(this,1,2)}

第一个是this，指向类中的this,因为事件的回调函数this指向变了，通过bind可以修改this指向，指向到类的this，从而调用到类中定义的各种方法，然后依次是参数

定义的函数，从参数开始，最后一个是事件对象

fun1(arg1,arg2,event){
		alert(arg1)
	}

整体测试：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
	fun1(arg1,arg2,event){
		alert(arg1)
	}
	render() {
	 return <div>
	 	<p onClick={this.fun1.bind(this,1,2)}>点击事件</p>
	 </div>;
	}
}


ReactDOM.render(
    <div>
		<Event />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

5.绑定事件传递接收到的参数

先看以前学习过的，如果传递给组件一个参数，和显示他：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
	fun1(arg1,arg2,event){
		alert(arg1)
	}
	render() {
	 return <div>
	 	<p>{this.props.name}</p>
	 	<p onClick={this.fun1.bind(this,1,2)}>点击事件</p>
	 </div>;
	}
}


ReactDOM.render(
    <div>
		<Event name="小李子" />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

利用属性传递，我们可以看到组件显示出小李子：

我们进一步修改事件位置的代，把this.props.name作为实参传递进去即可：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
	fun1(arg1,arg2,event){
		alert(arg1)
	}
	render() {
	 return <div>
	 	<p>{this.props.name}</p>
	 	<p onClick={this.fun1.bind(this,this.props.name,2)}>点击事件</p>
	 </div>;
	}
}


ReactDOM.render(
    <div>
		<Event name="小李子" />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

效果：