react之可控组件与不可控组件

一、不可控组件

1 <input type="text" defaultvalue="Hello React" />

如上：defaultvalue的值是固定的，这就是一个不可控组件

如果要获取input的value值，只有使用ref获取节点来获取值

二、可控组件

1 <input type="text" defaultvalue={this.state.value} />

如上：defaultvalue的值是根据状态确定的，只需要拿到this.state.value的值就可以了，

这里需要注意一下：使用value的值是不可以修改的，defaultValue的值是可以修改的

三、可控组件的优点

1、符合React的数据流

2、数据存储在state中，便于获取

3、便于处理数据

 1 import React from 'react';
 2 import ReactDOM from 'react-dom';
 3  
 4 // 不可控组建，要是使用refs属性对DOM节点进行操作
 5 class UnControll extends React.Component {
 6     submitData = (e)=> {
 7         var userInput1 = ReactDOM.findDOMNode(this.refs.userInput1).value;
 8         var userInput2 = ReactDOM.findDOMNode(this.refs.userInput2).value;
 9         alert(userInput1);
10         alert(userInput2)
11         e.preventDefault();
12     }
13     render(){
14         return (
15             <form onSubmit={this.submitData}>
16                 {/*
17                     在表单中，使用value是无法改变的，需要使用defaultValue
18                     checked与defaultChecked同上
19                 */}
20                 <input
21                     type="text"
22                     value="不可控组件"
23                     ref="userInput1"
24                 />
25                 <input
26                     type="text"
27                     defaultValue="不可控组件"
28                     ref="userInput2"
29                 />
30                 <button>提交</button>
31             </form>
32         )
33     }
34 }
35  
36 // 可控组建,不需要对DOM进行操作
37 class Controll extends React.Component {
38     state = { value:'可控组件' }
39     submitData = (e)=> {
40         alert(this.state.value);
41         e.preventDefault();
42     }
43     handleChange = (e)=>{
44         this.setState({
45             value:e.target.value
46         })
47     }
48     render() {
49         return (
50             <form onSubmit={this.submitData}>
51                 <input
52                     type="text"
53                     defaultValue={this.state.value}
54                     onChange={this.handleChange}
55                 />
56                 <button>提交</button>
57             </form>
58         );
59     }
60 }
61  
62 export default Controll;