1. 受控组件

受控组件：页面中所有输入类的DOM， 比如：、</strong>、<strong><select> </strong>随着你的输入， 把值维护到状态里面， 当你用的时候直接从状态里面获取。【类似<strong>VUE的双向数据绑定</strong>】</p> <p>在表单元素中， 通常自己维护<strong>state</strong>, 并且根据用户输入进行更新</p> <pre><code class="lang-javascript">import React from 'react' class App extends React.Component { submit = (event) => { //阻止事件冒泡 event.preventDefault(); const {username,password} = this; console.log(`用户名是：${username.value}, 密码是：${password.value}`) } render() { return ( <div> <form action='www.baidu.com' onSubmit={this.submit}> 账号: <input ref ={c => this.username = c} type='username'/> 密码：<input ref = {c => this.password = c}type='password'/> <button type="submit">提交</button> </form> </div> ); } } export default App; </code></pre> <p><strong>总结：</strong></p> <ul> <li>每当输入框的输入内容发生变化时， 都会被写入到组件的<strong>state</strong>中， 这种组件在<strong>React</strong>中被理解为受控组件。</li><li>受控组件的值始终由<strong>React</strong>的<strong>state</strong>驱动的。</li><li>这种组件的数据是由<strong>React</strong>组件进行管理的， 所以在大多数情况下， 官方 推介使用受控组件。</li></ul> <p><strong>受控组件更新state的简要流程：</strong></p> <ul> <li>首先通过<strong>state设</strong>置输入框的默认值；</li><li>当输入框的值发生变化时， 调用<strong>onChange</strong>事件处理器；</li><li>事件处理器通过<strong>合成事件对象event</strong>拿到改变后的数据， 并且更新应用的<strong>state</strong>；</li><li><strong>setState触发视图的重新渲染， 完成数据的更新展示；</strong></li></ul> <p><strong>受控组件的缺陷：</strong><br />当有多个输入框时，我们如果想同时获取到全部的值就必须每个都要编写事件处理函数， 这会让我们的代码很<strong>臃肿</strong>。所以出现了非受控组件。 <a name="EK61F"></a></p> <h1 id="eoders"><a name="eoders" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 非受控组件</h1><p>非受控组件将真实数据储存在 <strong>DOM 节点</strong>中【现用现取】</p> <ul> <li>输入框输入的值，存储在了<strong>DOM节点</strong>中</li><li>然后通过<strong>ref</strong>来获取该<strong>DOM节点</strong>取值</li><li><strong>现用现取</strong><pre><code class="lang-javascript">import React from 'react' class App extends React.Component { submit = (event) => { event.preventDefault(); //阻止表单提交 const {username,password} = this; console.log(`用户名是：${username.value}, 密码是：${password.value}`) } render() { return ( <div> <form action='www.baidu.com' onSubmit={this.submit}> 账号: <input ref ={c => this.username = c} type='username'/> 密码：<input ref = {c => this.password = c}type='password'/> <button type="submit">提交</button> </form> </div> ); } } export default App; </code></pre> </li></ul>