React系列十：受控组件与非受控组件

快来加入我们吧！《小河山菜鸟》为前端开发者提供技术资料和系列基础文章。为了更好的用户体验，请移步我们的官网小河山菜鸟（https://xhs-rookies.com/）学习，及时获取最新文章。“代码裁缝”，如果您对我们的文章感兴趣，或者想提点建议，请关注“小河山菜鸟”微信公众号，与我们取得联系，您也可以在微信上观看我们的文章。每一个建议或认可，都是对我们莫大的鼓励！前言本节我们将介绍React中受控组件和非受控组件的概念及其使用。本文将为您介绍以下内容：什么是受控组件/非受控组件受控组件非受控组件什么是受控组件/非受控组件在HTML中，、、<select>等表单元素一般维护自己的自己的状态，并根据用户输入进行更新。在React中，可变状态一般存储在组件的状态（state）属性中，只能通过setState()进行更新。我们可以通过使React的状态成为“单一事实来源原则”来结合这两种形式。那么渲染表单的React组件也可以控制用户输入后的行为。在这个表单中，一个由React控制其值的输入表单元素被称为“受控组件”。那么反之，value不受React控制，组件进入自己，reduce等，元素变成不受控制的组件。什么时候用受控组件，什么时候用非受控组件，可以看看这篇文章：ControlledanduncontrolledforminputsinReactdon'thavetobecomplicated-GoshaArinich(goshakkk.name)ControlledcomponentsknowcontrolledHowcontrolcomponentssubmit默认情况下的表单HTML表单元素与React中的其他DOM元素不同，因为表单元素自然地保留了一些内部状态。例如，这个纯HTML表单接受一个名称：<form><label>name:<inputtype="text"name="name"/></label><inputtype="submit"value="submit"/></form>此表单与HTML表单具有相同的默认行为。当用户提交此表单时，浏览器将打开一个新页面。如果您想在React中保留此行为，也可以使用。但大多数情况下，我们会让React组件管理这些数据，点击提交这些数据，触发打开新页面的操作。这就是使用“受控组件”的地方。受控组件提交表单在HTML中，<input>、<textarea>和<select>等表单元素通常会维护自己的状态，这些状态会根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，只能通过使用setState()来更新。我们将两者结合起来，使React的状态成为“单一数据源”；呈现表单的React组件还控制用户输入期间表单上发生的操作；这样被React控制的表单输入元素称为“受控组件”；例如，如果我们希望前面的示例在提交时打印出名称，我们可以将表单编写为受控组件：,}}render(){const{用户名}=这个。状态返回(<div><formonSubmit={(e)=>this.handleSubmit(e)}><labelhtmlFor="username">Username:<inputtype="text"id="username"onChange={(e)=>this.handleUsernameChange(e)}value={username}/></label><inputtype="submit"value="Submit"/></form></div>)}handleUsernameChange(事件){this.setState({username:event.target.value,})}handleSubmit(event){console.log(this.state.username)event.preventDefault()}}由于在表单元素上设置了value属性，因此显示的值将始终是this.state.value，这使得React的状态成为唯一的数据源由于handleUsernameChange在每次按键时执行并更新React的状态，因此显示的值将随着用户键入而更新。非受控组件Ref的创建和使用在React开发模式下通常不需要也不建议直接原生操作DOM，但在某些特殊情况下，确实需要获取DOM进行某些操作：管理焦点，文本选择或媒体播放。触发强制动画。集成第三方DOM库。如果我们这里使用非受控组件，就会有一个问题，如何获取组件的数据，这里我们可以使用Refs来获取组件，然后就可以获取到组件的数据了。那么我们先简单介绍一下Refs的内容。注意：当然还有其他方式获取组件内容，例如：将变量提升到父组件进行统一管理和事件监听。Howtocreateref如何创建refs来获取对应的DOM？目前有以下三种方式：方式一：使用传入字符串时，通过this.refs获取对应的元素。传入的字符串格式；方法二：传入一个对象对象由React.createRef()创建；使用时，创建的对象有一个current属性，即对应的元素；方法三：传入一个DOM挂载时会回调的函数，这个函数会传入一个element对象，我们可以自己保存；使用时，直接获取之前保存的元素对象即可；代码演练：classAppextendsPureComponent{constructor(props){super(props)this.titleRef=createRef()this.titleEl=null}render(){return(<div><h2ref="title">StringRef</h2><h2ref={this.titleRef}>你好创建Ref</h2><h2ref={(element)=>(this.titleEl=element)}>CallbackRef</h2><buttononClick={(e)=>this.changeText()}>ChangeText</button></div>)}changeText(){this.refs.title.innerHTML='小河山菜鸟你好'this.titleRef.current.innerHTML='你好，小河山的菜鸟'this.titleEl.innerHTML='你好，小河山的菜鸟'}}Ref节点的类型ref的值根据节点的类型而不同：当ref属性用于HTML元素时，ref在构造函数中使用React.createRef()创建，接收底层DOM元素作为其当前属性；当在自定义类组件中使用ref属性时，ref对象接收组件的已安装实例作为其当前属性；您不能在函数组件上使用ref属性，因为它们没有实例；这里我们演示ref引用一个类组件对象：:{this.state.counter}</h2><buttononClick={(e)=>this.increment()}>+1</button></div>)}increment(){this.setState({counter:this.state.counter+1,})}}classAppextendsPureComponent{构造函数(props){super(props)this.counterRef=createRef()}render(){return(<div><Counterref={this.counterRef}/><buttononClick={(e)=>this.increment()}>app+1</button></div>)}increment(){this.counterRef.current.increment()}}函数式组件没有实例，所以无法通过ref获取，但是有时候，我们可能希望在函数式组件中获取一个DOM元素。这时候我们可以通过React.forwardRef，后面我们会学习如何在hooks中使用ref来识别非受控组件。React在大多数情况下推荐使用受控组件来处理表单数据：在受控组件中，表单数据由React组件管理；另一种选择是使用非受控组件，然后表单数据将由DOM节点处理；如果我们要使用非受控组件中的数据，那么我们需要使用Ref从DOM节点中获取表单数据。我们来做一个简单的演练：使用ref获取输入元素；defaultValue通常用于在非受控组件中设置默认值；classAppextendsPureComponent{constructor(props){super(props)this.usernameRef=createRef()}render(){return(<div><formonSubmit={(e)=>this.handleSubmit(e)}><标签htmlFor="">用户：<inputdefaultValue="username"type="text"name="username"ref={this.usernameRef}/></label><inputtype="submit"value="Submit"/></form></div>)}handleSubmit(event){event.preventDefault()console.log(this.usernameRef.current.value)}}同样，<inputtype="checkbox">和<inputtype="radio">支持defaultChecked，<select>和<textarea>支持defaultValue。下一节预览本节我们学习了React的中控组件和非受控组件的内容。下一章我们会继续学习React的中高级组件和组件补充，敬请期待！</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="90行代码实现模块打包器" href="/webqianduan/182269.html">90行代码实现模块打包器</a> </div> <div class="prev">下一篇：<a title="【JS30-WesBos】实时显示时钟页面02" href="/webqianduan/182271.html">【JS30-WesBos】实时显示时钟页面02</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>React系列十：受控组件与非受控组件相关文章</code></div> <ul> <li><a href="/kejifunen/369503.html" target="_blank" title="虹口区创客服务中心系列活动——智能硬件与科技创新路演成功举办">虹口区创客服务中心系列活动——智能硬件与科技创新路演成功举办</a></li> <li><a href="/kejifunen/369411.html" target="_blank" title="深度评测HUAWEI WATCH星月系列 科技与时尚的全美式">深度评测HUAWEI WATCH星月系列 科技与时尚的全美式</a></li> <li><a href="/kejifunen/369323.html" target="_blank" title="【年终总结】黑科技井喷！ 2015年十大可穿戴技术将如何改变">【年终总结】黑科技井喷！ 2015年十大可穿戴技术将如何改变</a></li> <li><a href="/kejifunen/369227.html" target="_blank" title="“十”鲜！松下大型跨门冰箱上市！ ">“十”鲜！松下大型跨门冰箱上市！ </a></li> <li><a href="/kejifunen/369145.html" target="_blank" title="合力亿捷第十期呼叫中心运营管理沙龙在上海举行">合力亿捷第十期呼叫中心运营管理沙龙在上海举行</a></li> <li><a href="/kejifunen/369028.html" target="_blank" title="墨照稳定器全系列产品亮相BIRTV2018！从现在开始你我一">墨照稳定器全系列产品亮相BIRTV2018！从现在开始你我一</a></li> <li><a href="/kejifunen/368901.html" target="_blank" title="2018中国500强！十大科技公司中，京东、腾讯、阿里巴巴都">2018中国500强！十大科技公司中，京东、腾讯、阿里巴巴都</a></li> <li><a href="/kejifunen/368894.html" target="_blank" title="解答一切问题的“AI家庭助理”就在这里，京东联手十大消费品牌">解答一切问题的“AI家庭助理”就在这里，京东联手十大消费品牌</a></li> <li><a href="/kejifunen/368809.html" target="_blank" title="360发布X1系列儿童手表！支持视频通话">360发布X1系列儿童手表！支持视频通话</a></li> <li><a href="/kejifunen/368791.html" target="_blank" title="2018胡润百富榜！马云首富雷军第十，拼多多黄峥最大黑马">2018胡润百富榜！马云首富雷军第十，拼多多黄峥最大黑马</a></li> <li><a href="/kejifunen/368734.html" target="_blank" title="索尼正式发布国行版“华帝”系列A9F-Z9F旗舰电视，199">索尼正式发布国行版“华帝”系列A9F-Z9F旗舰电视，199</a></li> <li><a href="/kejifunen/368596.html" target="_blank" title="科技呈现改革开放四十年，苏宁让未来生活更美好">科技呈现改革开放四十年，苏宁让未来生活更美好</a></li> <li><a href="/kejifunen/368592.html" target="_blank" title="IMX380+防抖，魅族16th系列摄影魅力何在？ ">IMX380+防抖，魅族16th系列摄影魅力何在？ </a></li> <li><a href="/kejifunen/368306.html" target="_blank" title="2016年可穿戴设备行业十大新闻事件">2016年可穿戴设备行业十大新闻事件</a></li> <li><a href="/kejifunen/368256.html" target="_blank" title="盘点可穿戴设备行业十大龙头企业（下）">盘点可穿戴设备行业十大龙头企业（下）</a></li> <li><a href="/kejifunen/368228.html" target="_blank" title="HTC走到了十字路口？ VR是救命稻草吗？ ">HTC走到了十字路口？ VR是救命稻草吗？ </a></li> <li><a href="/kejifunen/368214.html" target="_blank" title="十款炫酷高科技衣服，功能远超可穿戴设备">十款炫酷高科技衣服，功能远超可穿戴设备</a></li> <li><a href="/kejifunen/368200.html" target="_blank" title="暴风影音十二年来的智能设备之路">暴风影音十二年来的智能设备之路</a></li> <li><a href="/kejifunen/368125.html" target="_blank" title="华为发布Band 2系列智能手环">华为发布Band 2系列智能手环</a></li> <li><a href="/kejifunen/368054.html" target="_blank" title="所有系列均已正式打折， 6.6万元起售价的哈弗M6值得选择吗">所有系列均已正式打折， 6.6万元起售价的哈弗M6值得选择吗</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371146.html" title="华为nova3系列领跑破纪录，国内首月销量突破200万部" target="_blank">华为nova3系列领跑破纪录，国内首月销量突破200万部</a></li> <li><em>2</em><a href="/kejifunen/371005.html" title="Moto3603智能手表十大最值得期待的新功能！支持GPS" target="_blank">Moto3603智能手表十大最值得期待的新功能！支持GPS</a></li> <li><em>3</em><a href="/kejifunen/370862.html" title="微珠让您度过一个顺畅的夏天，飞利浦7000系列电动剃须刀专为" target="_blank">微珠让您度过一个顺畅的夏天，飞利浦7000系列电动剃须刀专为</a></li> <li><em>4</em><a href="/kejifunen/370856.html" title="智能办公商选柯尼卡美能达bizhub 658e系列新款黑白多" target="_blank">智能办公商选柯尼卡美能达bizhub 658e系列新款黑白多</a></li> <li><em>5</em><a href="/kejifunen/370747.html" title="阿里巴巴十八周年年会黑科技！ 4万只物联网手环灯光秀堪比奥运" target="_blank">阿里巴巴十八周年年会黑科技！ 4万只物联网手环灯光秀堪比奥运</a></li> <li><em>6</em><a href="/kejifunen/370638.html" title="种植圣诞礼物！支持eSIM 1双终端的HUAWEIWATCH" target="_blank">种植圣诞礼物！支持eSIM 1双终端的HUAWEIWATCH</a></li> <li><em>7</em><a href="/kejifunen/370616.html" title="我们来看看智能门锁行业的五大技术和十大厂商" target="_blank">我们来看看智能门锁行业的五大技术和十大厂商</a></li> <li><em>8</em><a href="/kejifunen/370591.html" title="运动手表、运动相机，智能穿戴的未来在哪里？ tesa全新热熔" target="_blank">运动手表、运动相机，智能穿戴的未来在哪里？ tesa全新热熔</a></li> <li><em>9</em><a href="/kejifunen/370375.html" title="智能硬件十字路口的酷想法！可穿戴技术将走向何方？ " target="_blank">智能硬件十字路口的酷想法！可穿戴技术将走向何方？ </a></li> <li><em>10</em><a href="/kejifunen/370325.html" title="从颜值开始，忠于品质——兄弟QL-1100系列标签打印机新品" target="_blank">从颜值开始，忠于品质——兄弟QL-1100系列标签打印机新品</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/370282.html" title="高性价比vivo Z3现已开启预购，苏宁易购双十一线下开售" target="_blank">高性价比vivo Z3现已开启预购，苏宁易购双十一线下开售</a></li> <li><em>2</em><a href="/kejifunen/370267.html" title="盘点十大智能手环品牌！小米、华为双双上榜" target="_blank">盘点十大智能手环品牌！小米、华为双双上榜</a></li> <li><em>3</em><a href="/kejifunen/370266.html" title="全面剖析可穿戴设备打开市场的十大“军规”" target="_blank">全面剖析可穿戴设备打开市场的十大“军规”</a></li> <li><em>4</em><a href="/kejifunen/370265.html" title="【盘点】回顾2015！智能硬件前十排行榜第一名居然是它" target="_blank">【盘点】回顾2015！智能硬件前十排行榜第一名居然是它</a></li> <li><em>5</em><a href="/kejifunen/370244.html" title="十大性价比手环推荐！小米手环只能排第二" target="_blank">十大性价比手环推荐！小米手环只能排第二</a></li> <li><em>6</em><a href="/kejifunen/370239.html" title="微软发布数字趋势！百分之七十的受访者对可穿戴设备感兴趣" target="_blank">微软发布数字趋势！百分之七十的受访者对可穿戴设备感兴趣</a></li> <li><em>7</em><a href="/kejifunen/370223.html" title="VR技术会是下一个十亿级市场吗？ " target="_blank">VR技术会是下一个十亿级市场吗？ </a></li> <li><em>8</em><a href="/kejifunen/370217.html" title="大品牌之外，5款鲜为人知但创意十足的可穿戴产品" target="_blank">大品牌之外，5款鲜为人知但创意十足的可穿戴产品</a></li> <li><em>9</em><a href="/kejifunen/370208.html" title="可穿戴技术行业分析系列四！三个有前途的行业" target="_blank">可穿戴技术行业分析系列四！三个有前途的行业</a></li> <li><em>10</em><a href="/kejifunen/370205.html" title="智能穿戴酷思维！先从华为荣耀系列开始吧" target="_blank">智能穿戴酷思维！先从华为荣耀系列开始吧</a></li> <li><em>11</em><a href="/kejifunen/370166.html" title="十大智能连衣裙非常概念化，非常未来感" target="_blank">十大智能连衣裙非常概念化，非常未来感</a></li> <li><em>12</em><a href="/kejifunen/370114.html" title="三星又曝无人机专利服务Galaxy系列手机？ " target="_blank">三星又曝无人机专利服务Galaxy系列手机？ </a></li> <li><em>13</em><a href="/kejifunen/370102.html" title="盘点近段时间最具创意的十大可穿戴设备产品" target="_blank">盘点近段时间最具创意的十大可穿戴设备产品</a></li> <li><em>14</em><a href="/kejifunen/370095.html" title="对话阿里巴巴人工智能实验室负责人千雪！国内智能音箱市场增长五" target="_blank">对话阿里巴巴人工智能实验室负责人千雪！国内智能音箱市场增长五</a></li> <li><em>15</em><a href="/kejifunen/369950.html" title="十一款智能手表来了， Apple Watch 2 能做什么" target="_blank">十一款智能手表来了， Apple Watch 2 能做什么</a></li> <li><em>16</em><a href="/kejifunen/369946.html" title="双十一如何种智能硬货，按照这四步走就没有错了" target="_blank">双十一如何种智能硬货，按照这四步走就没有错了</a></li> <li><em>17</em><a href="/kejifunen/369896.html" title="多菱智能家居——最受消费者喜爱的十大智能锁品牌 " target="_blank">多菱智能家居——最受消费者喜爱的十大智能锁品牌 </a></li> <li><em>18</em><a href="/kejifunen/369674.html" title="【年终盘点】主要看气质！ 2015年智能硬件十大“品质”" target="_blank">【年终盘点】主要看气质！ 2015年智能硬件十大“品质”</a></li> <li><em>19</em><a href="/kejifunen/369615.html" title="谈未来，盘点全球十大脑机接口技术初创公司" target="_blank">谈未来，盘点全球十大脑机接口技术初创公司</a></li> <li><em>20</em><a href="/kejifunen/369556.html" title="十三连冠！ 2018暴雪挑战赛科大讯飞荣获“全能冠军”" target="_blank">十三连冠！ 2018暴雪挑战赛科大讯飞荣获“全能冠军”</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>