React 進階之路（五）

豐寸發表於2019-05-17
React

之前的文章我們介紹了  React 事件，方法， React定義方法的幾種方式 獲取資料 改變資料 執行方法傳值。接下來我們將介紹 React 表單事件 鍵盤事件 事件物件以及 React中 的 ref 獲取 dom 節點 、雙向資料繫結，約束性和非約束性元件。

 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     }
11 
12 
13     getData = (event) => {
14         console.log(this.state.name);
15         event.target.style.color = "red";
16     }
17 
18     // event
19     inputChange1 = (event)=>{
20         this.setState({
21             name: event.target.value
22         })
23     }
24 
25     // ref
26     inputChange2 = ()=>{
27         this.setState({
28             name: this.refs.name.value
29         })
30     }
31 
32     // 鍵盤事件
33     inputChange3 = (event)=>{
34         console.log(event.keyCode)
35     }
36 
37     inputGet = () =>{
38         console.log(this.state.name)
39     }
40 
41     render() {
42         return (
43             <div>
44                 <p>Hello {this.state.name}</p>
45 
46                 <button onClick={this.getData}>獲取event</button>
47 
48                 <br/><br/>
49 
50                 {/*event*/}
51                 <input onChange={this.inputChange1} type="text"/>
52                 <button onClick={this.inputGet}>獲取input值</button>
53 
54                 <br/><br/>
55 
56                 {/*ref*/}
57                 <input ref="name" onChange={this.inputChange2} type="text"/>
58                 <button onClick={this.inputGet}>獲取input值</button>
59 
60                 <br/><br/>
61 
62                 {/*鍵盤事件*/}
63                 <input onKeyUp={this.inputChange3} type="text"/>
64                 <button onClick={this.inputGet}>獲取input值</button>
65 
66                 <br/><br/>
67 
68                 {/*value defaultValue*/}
69                 <input value={this.state.name} onChange={this.inputChange1} type="text"/>
70                 <input defaultValue={this.state.name} onChange={this.inputChange1} type="text"/>
71             </div>
72         );
73     }
74 }
75 
76 export default Home;

 

 

在呼叫 getData 的方法時傳值 event，就可以獲取到該元素的原生 DOM 屬性，我們可以對其進行操作，如改變元素顏色：event.target.style.color = "red";

 

在 React 中並沒有提供類似於 Vue 中 model 的雙向資料繫結，所以我們得自己來寫，在 input 框中輸入內容時我們可以根據 onChange 事件實時獲取 input 框中的內容，再通過 event 事件獲取到原生 DOM 裡面的 value 值再賦給 this.state 中的資料，既可以達到雙向資料繫結的目標。

 

當然 React 提供了類似於 Vue 的 ref 屬性，我們同樣可以通過 ref 繫結屬性名，然後通過 refs 獲取到該屬性名，就能獲取到 input 框的 value 值。然後達到雙向資料繫結的目標。

 

React 中同樣為我們提供了鍵盤事件 onKeyUp 和 onKeyDown ，我們可以根據該事件達到雙向資料繫結的目標。

 

在 input 框最初賦值時可以有 value 和 defaultValue 兩種賦值方式，

defaultValue 是原生 DOM 中的 value 屬性，可以是一個死值，也可以是 this.state 中的資料，React 不會去管它。這樣的元件叫做非約束性元件。

value 是 React 中的一個屬性，它的值可以是一個死值，也可以是 this.state 中的資料， 但是需要通過 onChange 事件配合使用，如果不寫 onChange 事件會報錯。這樣的元件叫做非約束性元件。

最後執行結果為：

 

相關文章