這篇文章主要介紹React如何使用Hooks簡化受控組件的狀態(tài)綁定，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。十余年網(wǎng)站建設(shè)經(jīng)驗成都創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站設(shè)計制作、成都做網(wǎng)站、網(wǎng)站設(shè)計、H5開發(fā)、網(wǎng)站制作、高端網(wǎng)站設(shè)計、微信小程序定制開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

ECMAScript 6

文章中大量用到了 ES6 語法，比如解構(gòu)賦值和函數(shù)參數(shù)默認值、剩余參數(shù)、展開語法、箭頭函數(shù)等。

Hooks

React 在 16.8 版本中推出了 Hooks，它允許你在“函數(shù)組件”中使用“類組件”的一些特性。

React 本身提供了一些 Hooks，比如 useState、useReducer 等。通過在一個以“use”作為命名起始的函數(shù)中調(diào)用這些 Hooks，就得到了一個 custom Hook(自定義 Hook)。

Custom Hooks 允許我們把任何邏輯封裝到其中，以便于復(fù)用足夠小的組件邏輯。

Controlled Components

當(dāng)我們把像 和 <select> 這樣的 HTML 元素本身的狀態(tài)交給 React state 去管理，我們就得到了一個“受控組件”。</p><p><strong>styled-components</strong></p><p>一個與 React 契合良好的 CSS in JS 庫。它允許你使用 JS 編寫樣式，并編譯成純 CSS 文件。<br/>下面代碼中所有的樣式都是使用它編寫的。如果對代碼中樣式的實現(xiàn)不是很感興趣的話, 這個可以跳過。</p><p><strong>代碼實現(xiàn)</strong></p><p><strong>Input 組件</strong></p><p>首先我們需要實現(xiàn)一個 Input 組件，我們將在該組件的基礎(chǔ)上進行輸入、校驗并提示。</p><p>Input.js</p><pre>import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; const Wrap = styled.div({  display: 'flex',  flexDirection: 'column',  label: { display: 'flex', alignItems: 'center' },  input: {   marginLeft: 8,  },  p: {   color: 'red',  }, }); function Input({ label, type, helperText, error, ...otherProps }) {  return (   <Wrap>    <label>     {label}:     <input {...otherProps} type={type} />    </label>    {error && <p>{helperText}</p>}   </Wrap>  ); } Input.propTypes = {  label: PropTypes.string,  type: PropTypes.string,  helperText: PropTypes.string,  error: PropTypes.bool, }; export default Input;</pre><p>該組件主要接收以下幾個 props：</p><ul><li><p>label label 標簽的文本</p></li><li><p>type 賦值給原生 input 標簽的 type 屬性</p></li><li><p>error 數(shù)據(jù)類型為 Boolean，如果為 true 則表示當(dāng)前表單域有錯誤，即驗證不通過</p></li><li><p>helperText 當(dāng)前表單域驗證不通過時，顯示在表單域下方的提示文字</p></li><li><p>otherProps props 中除了上述四個以外的其他屬性，全部賦值給原生 input 標簽</p></li></ul><p><strong>Custom Hook</strong></p><p>有了 UI 組件之后，就可以開始實現(xiàn)我們的自定義 Hook 了。</p><p>useInput.js</p><pre>import { useState } from 'react'; export default function useInput({  initValue = '',  helperText = '',  validator = () => true,  validateTriggers = ['onChange'], } = {}) {  // 保存用戶輸入的值，使用 initValue 作為初始值  const [value, setValue] = useState(initValue);  // Boolean 類型，表示當(dāng)前表單項的驗證狀態(tài)  const [error, setError] = useState(false);  function onChange(e) {   const { value } = e.target;   setValue(value);   // 根據(jù) validateTriggers 的選項，決定是否要在 onChange 里進行校驗   if (validateTriggers.includes('onChange')) {    setError(!validator(value));   }  }  /**   * 根據(jù) validateTriggers 生成相應(yīng)的事件處理器   */  function createEventHandlers() {   const eventHandlers = {};   validateTriggers.forEach(item => {    // 生成相應(yīng)的事件處理器，并在其中做輸入校驗。    eventHandlers[item] = e => {     const { value } = e.target;     setError(!validator(value));    };   });   return eventHandlers;  }  const eventHandlers = createEventHandlers();  return {   value,   helperText,   error,   ...eventHandlers,   onChange,  }; }</pre><p>useInput 接收一個 options 對象作為參數(shù)，考慮到擴展性，使用一個配置對象作為參數(shù)比較好。</p><p>options 對象擁有以下幾個屬性：</p><ul><li><p>initValue 輸入框的初始值</p></li><li><p>helperText 當(dāng)表單驗證不通過時顯示的字符串</p></li><li><p>validator 用于進行表單驗證的函數(shù)，接收 value 作為參數(shù)，并返回一個 Boolean 值，表示表單驗證是否通過</p></li><li><p>validateTriggers 字符串?dāng)?shù)組，表明在哪個或哪幾個事件中調(diào)用 validator 進行輸入校驗。</p></li></ul><p>在函數(shù)體中，我們調(diào)用兩次 useState 來初始化 value 和 error 的值，分別保存用戶輸入的值和當(dāng)前表單域的校驗結(jié)果。<br/>然后，聲明一個 onChange 方法用來綁定 input 元素的 change 事件，在該方法中，我們把用戶輸入的值賦值給 value，同時根據(jù) validateTriggers 的值，決定是否要在該方法中進行輸入校驗。該方法隨后會被返回出去，再作為 props 傳遞給相應(yīng)的組件，完成受控組件的狀態(tài)綁定。</p><p>我們還需要聲明一個 createEventHandlers 方法，該方法通過遍歷 validateTriggers，生成相應(yīng)的事件處理器，并在這些事件處理器中進行輸入校驗。</p><p>最后我們調(diào)用 createEventHandlers 方法，并把生成的 eventHandlers（事件處理器） 通過擴展運算符，插入到最終返回的對象中。</p><p>注意：這里我們需要把 onChange 放在最后，以免帶有狀態(tài)綁定的 onChange 方法被 eventHandlers 中的 onChange 覆蓋掉。</p><p><strong>具體使用<br/></strong></p><p>現(xiàn)在讓我們來看看實際該如何使用：</p><pre>import React from 'react'; import Input from './Input'; import useInput from './useInput'; // 用于驗證郵箱的正則表達式 const EMAIL_REG = /\S+@\S+\.\S+/; export default function Form() {  const email = useInput({   initValue: '',   helperText: '請輸入有效的郵箱！',   validator: value => EMAIL_REG.test(value),   validateTriggers: ['onBlur'],  });  const password = useInput({   initValue: '',   helperText: '密碼長度需要在 6-20 之間！',   validator: value => value.length >= 6 && value.length <= 20,   validateTriggers: ['onChange', 'onBlur'],  });  /**   * 判斷是否禁用按鈕   */  function isButtonDisabled() {   // 當(dāng)郵箱或密碼未填寫時，或者郵箱或密碼輸入校驗未通過時，禁用按鈕   return !email.value || !password.value || email.error || password.error;  }  /**   * 處理表單提交   */  function handleButtonClick() {   console.log('郵箱：', email.value);   console.log('密碼：', password.value);  }  return (   <div>    <Input {...email} label="郵箱" type="email" />    <Input {...password} label="密碼" type="password" />    <button disabled={isButtonDisabled()} onClick={handleButtonClick}>     登錄    </button>   </div>  ); }</pre><p>這里調(diào)用了兩次 useInput，初始化 email 和 password 表單域數(shù)據(jù)。</p><p>然后使用擴展運算符，把值全部賦給 Input 組件。只用了幾行代碼就完成了定義初始值和受控組件的綁定，是不是很方便？</p><p>當(dāng)我們輸入郵箱的時候，并不會出現(xiàn)校驗提示，但是一旦從郵箱輸入框失去焦點以后，輸入的值就會被校驗，并根據(jù)校驗結(jié)果顯示相應(yīng)的提示。而密碼輸入框，則會在輸入的過程中和失焦后都進行校驗。</p><p>以上是“React如何使用Hooks簡化受控組件的狀態(tài)綁定”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！</p> <br> 本文標題：React如何使用Hooks簡化受控組件的狀態(tài)綁定 <br> 網(wǎng)站URL：<a href="http://weahome.cn/article/jsciep.html">http://weahome.cn/article/jsciep.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/hepdes.html">手把手敲java代碼 java如何敲代碼</a> </li><li> <a href="/article/hepdse.html">windows山寨系統(tǒng)嗎的簡單介紹</a> </li><li> <a href="/article/hepdds.html">go語言調(diào)用按鍵精靈 按鍵精靈goto語句</a> </li><li> <a href="/article/hepdoc.html">php數(shù)據(jù)去除相同記錄 php刪除記錄</a> </li><li> <a href="/article/hepdcj.html">linux網(wǎng)關(guān)命令大全 linux的網(wǎng)關(guān)</a> </li> </ul> </div> <div id="squ6kqw" class="footer"> <div id="squ6kqw" class="foota container"> <div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站制作</h3> <a target="_blank">手機網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作</a><a target="_blank">重慶網(wǎng)站制作</a><a target="_blank">手機網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作公司</a><a target="_blank">綿陽網(wǎng)站制作</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企業(yè)服務(wù)</h3> <a target="_blank">工商服務(wù)</a><a target="_blank">軟文平臺</a><a target="_blank">分類目錄</a><a target="_blank">軟文發(fā)布</a><a target="_blank">一元廣告</a><a target="_blank">軟文發(fā)稿</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站建設(shè)</h3> <a target="_blank">成都做網(wǎng)站建設(shè)公司</a><a href="http://weahome.cn/" target="_blank">重慶網(wǎng)站建設(shè)</a><a target="_blank">成都響應(yīng)式網(wǎng)站建設(shè)</a><a target="_blank">營銷型網(wǎng)站建設(shè)</a><a target="_blank">醫(yī)藥醫(yī)療網(wǎng)站建設(shè)方案</a><a target="_blank">企業(yè)網(wǎng)站建設(shè)公司</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服務(wù)器托管</h3> <a target="_blank">綿陽機房租用</a><a target="_blank">綿陽托管服務(wù)器</a><a target="_blank">綿陽服務(wù)器托管</a><a target="_blank">成都托管服務(wù)器</a><a target="_blank">服務(wù)器機柜租賃</a><a target="_blank">義龍電信機房</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國免費咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號錦天國際A幢1002號</p> </div> </div> <div id="squ6kqw" class="footb"> <div id="squ6kqw" class="copy container"> <div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號</a></div> <!--<div id="squ6kqw" class="fr"><a target="_blank">成都網(wǎng)站建設(shè)</a>：<a target="_blank">創(chuàng)新互聯(lián)</a></div>--> </div> </div> <div id="squ6kqw" class="link"> <div id="squ6kqw" class="container"> 友情鏈接:： <a target="_blank">成都網(wǎng)站建設(shè)</a> <a target="_blank">重慶網(wǎng)站建設(shè)</a> <a href="">四川網(wǎng)站建設(shè)</a> <a href="">重慶建設(shè)網(wǎng)站</a> <a target="_blank">移動服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計制作</a> <a target="_blank">重慶網(wǎng)頁設(shè)計</a> <a target="_blank">重慶做網(wǎng)站</a> <a target="_blank">重慶網(wǎng)站制作</a> <a href="">重慶網(wǎng)站建設(shè)</a> <a href="">重慶網(wǎng)站公司</a> <a href="">渝中網(wǎng)站制作</a> <a href="">重慶網(wǎng)站設(shè)計</a> </div> </div> </div> <div id="squ6kqw" class="foot"> <ul class="public-celan"> <li> <a target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">在線咨詢</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">電話咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">QQ咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">預(yù)約顧問</span> </a> </li> </ul> </div> <div id="squ6kqw" class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在線咨詢</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p> </a> </dt> </dl> </div> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a> <div class="friend-links"> </div> </div> </footer> <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> </body><div id="s4kcc" class="pl_css_ganrao" style="display: none;"><fieldset id="s4kcc"><noscript id="s4kcc"><tbody id="s4kcc"></tbody></noscript></fieldset><em id="s4kcc"></em><code id="s4kcc"><ul id="s4kcc"><fieldset id="s4kcc"></fieldset></ul></code><cite id="s4kcc"></cite><strike id="s4kcc"><tbody id="s4kcc"><tr id="s4kcc"></tr></tbody></strike><em id="s4kcc"></em><tr id="s4kcc"><xmp id="s4kcc"><small id="s4kcc"></small></xmp></tr><option id="s4kcc"></option><tr id="s4kcc"><xmp id="s4kcc"><small id="s4kcc"></small></xmp></tr><xmp id="s4kcc"><input id="s4kcc"><delect id="s4kcc"></delect></input></xmp><tbody id="s4kcc"><del id="s4kcc"><cite id="s4kcc"></cite></del></tbody><tbody id="s4kcc"></tbody><abbr id="s4kcc"></abbr><dfn id="s4kcc"><strong id="s4kcc"><acronym id="s4kcc"></acronym></strong></dfn><cite id="s4kcc"></cite><nav id="s4kcc"></nav><abbr id="s4kcc"><acronym id="s4kcc"><object id="s4kcc"></object></acronym></abbr><fieldset id="s4kcc"><menu id="s4kcc"><noscript id="s4kcc"></noscript></menu></fieldset><dd id="s4kcc"></dd><tr id="s4kcc"></tr><xmp id="s4kcc"><input id="s4kcc"><delect id="s4kcc"></delect></input></xmp><tr id="s4kcc"></tr><samp id="s4kcc"></samp><xmp id="s4kcc"><input id="s4kcc"><delect id="s4kcc"></delect></input></xmp><code id="s4kcc"></code><samp id="s4kcc"></samp><optgroup id="s4kcc"><center id="s4kcc"><input id="s4kcc"></input></center></optgroup><code id="s4kcc"></code><tr id="s4kcc"><cite id="s4kcc"><center id="s4kcc"></center></cite></tr><delect id="s4kcc"></delect><strong id="s4kcc"></strong><object id="s4kcc"></object><bdo id="s4kcc"></bdo><tbody id="s4kcc"></tbody><li id="s4kcc"></li><sup id="s4kcc"><center id="s4kcc"><dl id="s4kcc"></dl></center></sup><tr id="s4kcc"></tr><strong id="s4kcc"></strong><menu id="s4kcc"></menu><pre id="s4kcc"><blockquote id="s4kcc"><dfn id="s4kcc"></dfn></blockquote></pre><small id="s4kcc"></small><dfn id="s4kcc"><source id="s4kcc"><strong id="s4kcc"></strong></source></dfn><bdo id="s4kcc"></bdo><nav id="s4kcc"></nav><td id="s4kcc"></td><menu id="s4kcc"><noscript id="s4kcc"><pre id="s4kcc"></pre></noscript></menu><strike id="s4kcc"><menu id="s4kcc"><tbody id="s4kcc"></tbody></menu></strike><tbody id="s4kcc"><pre id="s4kcc"><del id="s4kcc"></del></pre></tbody><tr id="s4kcc"><xmp id="s4kcc"><small id="s4kcc"></small></xmp></tr><center id="s4kcc"></center></div> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //獲取圖片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //絕對路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>