React 進階之路（四）

豐寸發表於2019-05-16
React

之前的文章我們介紹了  React 繫結屬性( 繫結class  繫結style)、引入圖片  迴圈陣列渲染資料。接下來我們將介紹 React 事件，方法， React定義方法的幾種方式 獲取資料 改變資料 執行方法傳值。

 1 import React, {Component} from 'react';
 2 
 3 class Home extends Component {
 4     constructor(props) {
 5         super(props);
 6         this.state = {
 7             name: "zhangsan",
 8         };
 9 
10         this.getData2 = this.getData2.bind(this);
11     }
12 
13     getData1() {
14         console.log(this.state.name)
15     }
16 
17     getData2() {
18         console.log(this.state.name)
19     }
20 
21     getData3 = () => {
22         console.log(this.state.name)
23     }
24 
25     setData = (name) => {
26         this.setState({
27             name: name
28         })
29     }
30 
31     render() {
32         return (
33             <div>
34                 <p>Hello {this.state.name}</p>
35 
36                 <button onClick={this.getData1.bind(this)}>獲取資料1</button>
37                 <button onClick={this.getData2}>獲取資料2</button>
38                 <button onClick={this.getData3}>獲取資料3</button>
39                 <button onClick={this.setData.bind(this, "lisi")}>改變資料</button>
40             </div>
41         );
42     }
43 }
44 
45 export default Home;

React 上繫結方法共有三種方法：

首先我們在 onClick 點選時間中直接繫結 this.getData 方法的時候如果寫成 this.getData( ) 的話會直接呼叫該方法，所以不能寫 ( )，

在不寫 () 的情況下，後點選執行 getDate 方法獲取 this.state 裡面的資料會報錯，這是因為this指向發生了變化。繫結 this 指向有一下方法：

1、this.getData1.bind(this)，在該方法後面直接寫 .bind(this)，在執行 getData1 方法的時候 this 指向不會發生變化。

2、this.getData2 = this.getData2.bind(this)，在 constructor 建構函式中直接將 getData2 方法繫結上 this.

3、this.getData ，然後在呼叫該方法的時候 getData3 = () => { }，運用箭頭函式的方法直接將 this 指向上下文。

在實際開發應用中我們建議使用第三種方法。

 

在方法中傳值需要使用 this.setData.bind(this, 值) 的方法，第一個引數為 this，第二個引數為要傳的值。

在方法中要改變 this.state 中的資料時需要使用 this.setState({ 要改變的資料變數名：更改的資料 }) 的方法。

最後執行結果如下：

 

相關文章