react学习笔记4:事件和方法

前端之家收集整理的这篇文章主要介绍了react学习笔记4:事件和方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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,event){
		alert(arg1)
	}
	render() {
	 return <div>
	 	<p onClick={this.fun1.bind(this,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,event){
		alert(arg1)
	}
	render() {
	 return <div>
	 	<p>{this.props.name}</p>
	 	<p onClick={this.fun1.bind(this,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,this.props.name,document.getElementById('root')
);
registerServiceWorker();

效果

猜你在找的React相关文章