React 进阶之路（五）

weijiutao 2019-05-17 原文

之前的文章我们介绍了 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 事件会报错。这样的组件叫做非约束性组件。

最后运行结果为：