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

一、不可控组件

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

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

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

二、可控组件

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

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

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

三、可控组件的优点

1、符合React的数据流

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

3、便于处理数据

 import React from 'react';
 import ReactDOM from 'react-dom';

 // 不可控组建，要是使用refs属性对DOM节点进行操作
 class UnControll extends React.Component {
     submitData = (e)=> {
         var userInput1 = ReactDOM.findDOMNode(this.refs.userInput1).value;
         var userInput2 = ReactDOM.findDOMNode(this.refs.userInput2).value;
         alert(userInput1);
         alert(userInput2)
         e.preventDefault();
     }
     render(){
         return (
             <form onSubmit={this.submitData}>
                 {/*
                     在表单中，使用value是无法改变的，需要使用defaultValue
                     checked与defaultChecked同上
                 */}
                 <input
                     type="text"
                     value="不可控组件"
                     ref="userInput1"
                 />
                 <input
                     type="text"
                     defaultValue="不可控组件"
                     ref="userInput2"
                 />
                 <button>提交</button>
             </form>
         )
     }
 }

 // 可控组建,不需要对DOM进行操作
 class Controll extends React.Component {
     state = { value:'可控组件' }
     submitData = (e)=> {
         alert(this.state.value);
         e.preventDefault();
     }
     handleChange = (e)=>{
         this.setState({
             value:e.target.value
         })
     }
     render() {
         return (
             <form onSubmit={this.submitData}>
                 <input
                     type="text"
                     defaultValue={this.state.value}
                     onChange={this.handleChange}
                 />
                 <button>提交</button>
             </form>
         );
     }
 }

 export default Controll;