React事件方法、React定義方法的幾種方式、獲取數據、改變數據、執行方法傳值
阿新 • • 發佈:2019-02-23
rom super 數據 spa 箭頭 tor 重要 定義 render
1、案例實現代碼如下
import React, { Component } from ‘react‘; /** * 特別註意this,對於傳值和綁定都十分重要 */ class Home4 extends Component{ constructor(props){ super(props); //定義數據 this.state={ msg:‘這是一個Home4組件‘, name:"楊傑" } this.getMessage = this.getMessage.bind(this); } run(){ alert("這是一個run方法"); } getData(){ alert(this.state.msg); } //改變state值 setData=()=>{ this.setState({ msg:"改變msg的值" }) } getMessage(){ alert(this.state.msg); } //箭頭函數 getName=()=>{ alert(this.state.name); } setName=(str)=>{ this.setState({ name:str }) } render() { return( <div> Home4 index 事件方法 <br/> 方法:{this.state.name} <br/> <button onClick={this.run}>執行方法,通過this.方法名</button> <br/> <p>方式1:通過this.方法名.bind(this)將this對象傳遞給getData()方法體內的this對象</p> <button onClick={this.getData.bind(this)}>執行方法1</button> <br/> <p>方式2:在構造函數,通過this.getMessage = this.getMessage.bind(this)這種方式賦值</p> <button onClick={this.getMessage}>執行方法2</button> <br/> <p>方式3:在構造函數,通過this.getMessage = this.getMessage.bind(this)這種方式賦值</p> <button onClick={this.getName}>執行方法3</button> <br/> <button onClick={this.setData}>改變state中的值</button> <br/> <button onClick={this.setName.bind(this,"zhangsan")}>執行方法傳值</button> </div> ) } } export default Home4;
React事件方法、React定義方法的幾種方式、獲取數據、改變數據、執行方法傳值