首页 > 其他 > 详细

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

时间:2019-04-19 18:57:07      阅读:209      评论:0      收藏:0      [点我收藏+]

一、不可控组件

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;

 

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

原文:https://www.cnblogs.com/yinhao-jack/p/10737557.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!