受控组件
在react中,input标签的局部属性受到react管制,如onChange是基于input 和change 事件进行封装
非受控组件
对于没有经验过封装的一些属性或者办法,能够通过ref去获取这个dom元素,再去获取或触发其本身的属性和办法(这点的话和Vue是一样的)

react的ref三种应用形式，获取元素内容。
留神：应尽可能少的应用ref，优先应用state
1.字符串

refGetData1=()=>{            alert("获取到的内容："+this.refs.div1.innerText);        } <div ref='div1' onClick={this.refGetData1}>点我是ref字符串形式</div>

2.回调函数（举荐）

refGetData2=()=>{            alert("获取到的内容："+this.refData2.innerText);        }<div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的形式</div>

3.React.createRef() ，react16.3新增办法

constructor(props){    super(props)    this.refData3=React.createRef()  // react16.3扩大的新办法，原理是将值赋给变量，通过ref挂载在节点或组件上，应用ref的current属性拿到节点}refGetData3=()=>{    alert("获取到的内容："+this.refData3.current.innerText);}<div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的办法，原理是将值赋给变量，通过ref挂载到节点或组件上，应用ref的current属性拿到节点</div>

残缺代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="../node_modules/react/umd/react.development.js"></script>    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>    <script src="../node_modules/babel-standalone/babel.min.js"></script></head><body>    <div id='test'></div>    <script type='text/babel'>        class Test extends React.Component{            constructor(props){                super(props)                this.refData3=React.createRef()  // react16.3扩大的新办法，原理是将值赋给变量，通过ref挂载在节点或组件上，应用ref的current属性拿到节点            }        refGetData1=()=>{            alert("获取到的内容："+this.refs.div1.innerText);        }        refGetData2=()=>{            alert("获取到的内容："+this.refData2.innerText);        }        refGetData3=()=>{            alert("获取到的内容："+this.refData3.current.innerText);        }        render(){            return(                <div>                    <div ref='div1' onClick={this.refGetData1}>点我是ref字符串形式</div>                    <div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的形式</div>                    <div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的办法，原理是将值赋给变量，通过ref挂载到节点或组件上，应用ref的current属性拿到节点</div>                </div>            )        }    }    ReactDOM.render(<Test/> ,document.getElementById('test'))    </script></body></html>