2019獨角獸企業(yè)重金招聘Python工程師標準>>>

一.基本用法

在以類繼承的方式定義的組件中，為了能方便地調用當前組件的其他成員方法或屬性（如：this.state），通常需要將事件處理函數(shù)運行時的 this 指向當前組件實例。

綁定事件處理函數(shù)this的幾種方法：

第一種方法：

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

renturn中

不能直接寫this.run(this)這樣寫代表執(zhí)行該方法需要寫bind。

應為this.run.bind(this)

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

第二種方法：

?? ?構造函數(shù)中改變

?? ?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傳遞進去。
• 通過構造函數(shù)改變
• 通過箭頭函數(shù)改變（最常用）

三.改變state值

通過改變this指向直接改變

在return中直接寫小括號，小括號，代表執(zhí)行。

應這樣傳值this.setName.bind(this,'張三')

參考代碼

import React from 'react';import '../assets/css/index.css';class Home extends React.Component{// 子類必須在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}>執(zhí)行方法</button><br /><br /><button onClick={this.getData.bind(this)}>獲取數(shù)據(jù)--第一種改變this指向的方法</button><br /><br /><button onClick={this.getMessage}>獲取數(shù)據(jù)--第二種改變this指向的方法</button><br /><br /><button onClick={this.getName}>獲取數(shù)據(jù)--第三種改變this指向的方法</button><br /><br /><button onClick={this.setData}>改變state里面的值</button><br /><br /><button onClick={this.setName.bind(this,'張三')}>執(zhí)行方法傳值</button>{/* <button onClick={this.setName.bind(this,'張三','李四')}>執(zhí)行方法傳值</button> */}</div>)} } export default Home;

轉載于:https://my.oschina.net/glorylion/blog/3000891

總結

以上是生活随笔為你收集整理的04.React事件 方法、 React定义方法的几种方式 获取数据 改变数据 执行方法传值...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。