1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 04.React事件 方法 React定义方法的几种方式 获取数据 改变数据 执行方法传值...

04.React事件 方法 React定义方法的几种方式 获取数据 改变数据 执行方法传值...

时间:2022-05-02 21:57:29

相关推荐

04.React事件 方法  React定义方法的几种方式 获取数据 改变数据 执行方法传值...

独角兽企业重金招聘Python工程师标准>>>

一.基本用法

在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。

绑定事件处理函数this的几种方法:

第一种方法:

run(){alert(this.state.name)}

renturn中

不能直接写this.run(this)这样写代表执行该方法需要写bind。

应为this.run.bind(this)

<button onClick={this.run.bind(this)}>按钮</button>

第二种方法:

构造函数中改变

this.run = this.run.bind(this);

run(){alert(this.state.name)}

return中写

<button onClick={this.run>按钮</button>

第三种方法:

run=()=> {alert(this.state.name)}

renturn中写

<button onClick={this.run>按钮</button>

二.注意事项

注意this指向

方法中不能写this.state.msg

可以改变this的指向方法,在onclick调用的时候,将this传递进去。通过构造函数改变通过箭头函数改变(最常用)

三.改变state值

通过改变this指向直接改变

在return中直接写小括号,小括号,代表执行。

应这样传值this.setName.bind(this,'张三')

参考代码

import React from 'react';import '../assets/css/index.css';class Home extends ponent{// 子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象constructor(props){super(props); //固定写法this.state={msg:'我是一个home组件',message:'我是一个message',username:'itying'} //第二种改变this指向的方法this.getMessage= this.getMessage.bind(this);}run(){alert('我是一个run方法')}getData(){alert(this.state.msg);}getMessage(){alert(this.state.message);}getName=()=>{alert(this.state.username);}//第三种改变this指向的方法setData=()=>{//改变state的值this.setState({msg:"我是一个home组件 这是改变后的值"})}setName=(str)=>{//改变state的值this.setState({username:str})}render(){return(<div><h2>{this.state.msg}</h2> <h2>{this.state.username}</h2><button onClick={this.run}>执行方法</button><br /><br /><button onClick={this.getData.bind(this)}>获取数据--第一种改变this指向的方法</button><br /><br /><button onClick={this.getMessage}>获取数据--第二种改变this指向的方法</button><br /><br /><button onClick={this.getName}>获取数据--第三种改变this指向的方法</button><br /><br /><button onClick={this.setData}>改变state里面的值</button><br /><br /><button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>{/* <button onClick={this.setName.bind(this,'张三','李四')}>执行方法传值</button> */}</div>)} }export default Home;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。