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(); 效果: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |