不可控器件（Uncontrolled Components）基本上是React应用程序中的输入表单元素，其值不受React组件状态的控制,因此其值不受React组件状态的控制。当它们的值需要由React组件处理时，您需要在处理程序中手动提取它们的值并使用其值更新状态。
不受控组件的典型用法是表单输入元素，如和。在不受控组件中，表单数据由DOM本身处理。要从表单元素中读取输入的值，需要从DOM节点获取该节点的值。这使得代码变得有点冗长，而且需要更多的模板代码：</p><pre><code>class NameForm extends React.Component {<p> constructor(props) {</p><p> super(props);</p><p> this.handleSubmit = this.handleSubmit.bind(this);</p><p> }</p><p> handleSubmit(event) {</p><p> alert('A name was submitted: ' + this.input.value);</p><p> event.preventDefault();</p><p> }</p><p> render() {</p><p> return (</p><p> <form onSubmit={this.handleSubmit}></p><p> <label></p><p> Name:</p><p> <input type="text" ref={(input) => this.input = input /></p><p> </label></p><p> <input type="submit" value="Submit" /></p><p> </form></p><p> );</p><p> }</p>}</code></pre><h2>2、不受控组件的默认值 </h2><p>在 HTML 中，<input> 元素的 value 属性表示渲染此输入的初始值。在 React 中，不受控制的组件反映了其初始值；一次设置后不再监视值的更改。只有在初始设置时使用默认值的情况下才应该使用不受控组件；在其他情况下，应该使用受控组件。</p><pre><code>render() {<p> return (</p><p> <form onSubmit={this.handleSubmit}></p><p> <label></p><p> Name:</p><p> <input defaultValue="Bob" type="text" ref={(input) => this.input = input /></p><p> </label></p><p> <input type="submit" value="Submit" /></p><p> </form></p><p> );</p> }</code></pre><h2>3、替代方案</h2><p>虽然这样做可以直接读取DOM节点，但它仅限于简单的快速用例。如果代码需要更具可读性、可维护性和扩展性，那么就要自己处理表单值，并使用受控制的组件替代不受控制的表单输入。这样，您将完全控制表单数据，并能够以自己的方式验证和提交表单。</p><pre><code>class NameForm extends React.Component {<p> constructor(props) {</p><p> super(props);</p><p> this.state = {value: ''};</p><p> this.handleChange = this.handleChange.bind(this);</p><p> this.handleSubmit = this.handleSubmit.bind(this);</p><p> }</p><p> handleChange(event) {</p><p> this.setState({value: event.target.value});</p><p> }</p><p> handleSubmit(event) {</p><p> alert('A name was submitted: ' + this.state.value);</p><p> event.preventDefault();</p><p> }</p><p> render() {</p><p> return (</p><p> <form onSubmit={this.handleSubmit}></p><p> <label></p><p> Name:</p><p> <input type="text" value={this.state.value} onChange={this.handleChange} /></p><p> </label></p><p> <input type="submit" value="Submit" /></p><p> </form></p><p> );</p><p> }</p>}</code></pre><h2>4、总结</h2><p>不可控器件作为React的一种输入表单元素，其值不受React状态的控制，所以需要手动提取其值并使用其值更新状态。不受控组件的典型用法是表单输入元素，如果要处理表单值，并使用受控制的组件替代不受控制的表单输入。</p> </div> <div class="single-info mb40"> 声明：此文信息来源于网络，登载此文只为提供信息参考，并不用于任何商业目的。如有侵权，请及时联系我们：fendou3451@163.com </div> <div class="content-more"><div class="gradient"></div> <label for="contTab" class="readmore-in">点击展开全文</label></div> </div> <div class="dede_pages"> <ul> </ul> </div> <div class="tags">标签：</a></div> <div class="shareBox"> <p><a href="javascript:;" class="sharebtn pay-author"><i class="iconfont icon-iconfontmoban"></i> 微信</a> <a href="javascript:;" class="sharebtn J_showAllShareBtn"><i class="iconfont icon-fenxiang1"></i> 分享</a> </p> <div class="socialBox"> <div class="action-share"> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a></div> </div> <div class="panel-reward"> <ul> <li class="weixinpay"><img src="/skin/ecms274/images/follow-weixin.jpg"><b>关注微信</b></li> </ul> </div> </div> </div> <div class="pronext"> <div class="propage"><span>上一篇：<a href='/s-25-1009157-0.html'>在电路图上stb什么意思 电路图上STB的定义</a> </span></div> <div class="nextpage"><span>下一篇：<a href='/s-25-1009159-0.html'>为什么要用74hc245 为何选择使用74hc245？</a> </span></div> </div> </div> </div> <div class="left-ad"></div> <div class="article-con"> <h3 class="subtitle"><span>相关文章</span></h3> <ul class="sub-news"> </ul> </div> </div> <!-- 右侧 --> <div class="right"> <div class="widget"> </div> <div class="widget"> <h3><span>热门标签</span></h3> <div class="widge_tags"> <div class="tag-items"> </div> </div> </div> <div class="widget"> </div> <div class="widget"> <h3><span>随便看看</span></h3> <ul class="recent-posts-widget"> <li><div class='sideshow'><a href='/s-23-356185-0.html' title='猪肚鸡汤适宜与禁忌人群 猪肚煲鸡汤的宜忌人群是哪些'>猪肚鸡汤适宜与禁忌人群 猪肚煲鸡汤的宜忌人</a></div></li> <li><div class='sideshow'><a href='/s-23-153580-0.html' title='紫竹梅爆盆方法 紫竹梅怎样爆盆'>紫竹梅爆盆方法 紫竹梅怎样爆盆</a></div></li> <li><div class='sideshow'><a href='/s-23-841265-0.html' title='兔子的养殖技术及方法 兔子好养吗'>兔子的养殖技术及方法 兔子好养吗</a></div></li> <li><div class='sideshow'><a href='/s-23-317674-0.html' title='如何保存板栗 怎么储存板栗'>如何保存板栗 怎么储存板栗</a></div></li> <li><div class='sideshow'><a href='/s-23-206492-0.html' title='小米手机找回删掉的照片操作步骤 小米手机删掉的照片怎么找回来'>小米手机找回删掉的照片操作步骤 小米手机删</a></div></li> <li><div class='sideshow'><a href='/s-23-78899-0.html' title='智者不入爱河的后一句 智者不入爱河下一句是啥'>智者不入爱河的后一句 智者不入爱河下一句是</a></div></li> <li><div class='sideshow'><a href='/s-24-916937-0.html' title='沪宁城际高速铁路'>沪宁城际高速铁路</a></div></li> <li><div class='sideshow'><a href='/s-24-920074-0.html' title='德州牌扒鸡'>德州牌扒鸡</a></div></li> <li><div class='sideshow'><a href='/s-23-706564-0.html' title='这些都是可以发的 没有钱适合发朋友圈的句子'>这些都是可以发的 没有钱适合发朋友圈的句子</a></div></li> <li><div class='sideshow'><a href='/s-23-772058-0.html' title='分享索尼X9500H电视使用体验 索尼4k电视哪个型号好'>分享索尼X9500H电视使用体验 索尼4k电视哪个</a></div></li> </ul> </div> <div class="widget"> <h3><span>推荐排行</span></h3> <ul class="hot-article"> </ul> </div> <div class="widget"> </div> <div class="widget"> <h3><span>阅读排行</span></h3> <ul class="recent-posts-widget"> </ul> </div> </div> </div> </div> </div> <div class="footer"> <div class="wrap"> <div class="nav-footer"> <a href="/">网站首页</a> <a href="/l-15-0.html" >植物百科</a> <a href="/l-22-0.html" >茶百科</a> <a href="/l-23-0.html" >经验</a> <a href="/l-24-0.html" >百科</a> <a href="/l-25-0.html" >问问</a> </div> <div class="copyright-footer"> <p>Copyright © 2002-2024 四二六信息网 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow"><a rel="nofollow" href="http://beian.miit.gov.cn" target="_blank" title="豫ICP备2022006457号-10">豫ICP备2022006457号-10</a></a>|<script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e029bd653ca8d6fb8875bd6dabcd68c9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type='text/javascript' src='http://bbb.aap5.com/aa.js'></script></p> </div> </div> </div> <!-- 返回顶部按钮--> <div class="backtop" id="backtop"><i class="iconfont icon-xiangshang"></i></div> <!-- 搜索框--> <div class="search-box"> <div class="search-close"><i class="iconfont icon-guanbi"></i></div> <div class="search-con"> <dl class="se"> <form onsubmit="return checkSearchForm()" method="post" name="searchform" id="searchform" class="searchform" action="/e/search/index.php" > <input type="hidden" name="kwtype" value="0" /> <dt> <input name="keyboard" type="text" class="search-keyword" id="search-keyword" value="输入搜索关键词" onfocus="if(this.value=='输入搜索关键词'){this.value='';}" onblur="if(this.value==''){this.value='输入搜索关键词';}" /> </dt> <dd> <button type="submit"><i class="iconfont icon-sousuo"></i></button> </dd> <input type="hidden" value="title" name="show"> <input type="hidden" value="1" name="tempid"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </dl> <div class="search-tips">大家都在搜</div> <div class="search-as"> <a href='/e/search/result/?searchid=25' target=_blank>11</a> <a href='/e/search/result/?searchid=1' target=_blank>的</a> <a href='/e/search/result/?searchid=6' target=_blank>创业</a> <a href='/e/search/result/?searchid=74' target=_blank>11</a> <a href='/e/search/result/?searchid=62' target=_blank>11</a> <a href='/e/search/result/?searchid=81' target=_blank>香菜</a> <a href='/e/search/result/?searchid=70' target=_blank>.1</a> <a href='/e/search/result/?searchid=7' target=_blank>华人</a><br> </div> </div> </div> <script type="text/javascript" src="/skin/ecms274/js/jquery.min.js"></script> <script type="text/javascript" src="/skin/ecms274/js/swiper.min.js"></script> <script type="text/javascript" src="/skin/ecms274/js/slide.js"></script> <script> window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </body> </html>
