React之數據綁定以及表單處理

一、表單元素

????????像<input>、<textarea>、<option>這樣的表單元素不同于其他元素，因為他們可以通過用戶交互發生變化。這些元素提供的界面使響應用戶交互的表單數據處理更加容易

????????交互屬性，用戶對一下元素交互時通過onChange回調函數來監聽組件變化。表單元素支持幾個受用戶交互影響的屬性：

? ? ? ? value用于<input>、<textarea>

? ? ? ? checked用于<checkbox>、<radio>

? ? ? ? selected用于<option>

二、受限組件和不受限組件

1.受限組件與雙向數據綁定

受限組件：設置了value的<input>是一個受限組件，對于受限的<input>，渲染出來HTML元素始終保持value屬性的值，此時用戶在渲染出來的組件里輸入任何值都不起作用

?寫一個完整的表單元素的實例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>受限組件和雙向綁定</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="hello"></div><div id="hello2"></div><script type="text/babel">//受限組件,他的class Hello extends React.Component{render(){return <div><input type="text" value='123'/><hr/></div>}}ReactDOM.render(<Hello />,document.getElementById('hello'))//雙向數據綁定class Hello2 extends React.Component{state = {value:'12345'}//valueChange = (e)=>{this.setState({value:e.target.value})}render(){return <div><input type="text" value={this.state.value} onChange={this.valueChange}/><p>{this.state.value}</p></div>}}ReactDOM.render(<Hello2 />,document.getElementById('hello2'))</script><!-- radio、checkbox、textarea、select --><hr/><div id="root1"></div><script type="text/babel">//表單元素的雙向綁定class Rtx extends React.Component{state = {//單選按鈕radioValue:'',//check選中的checkArr:[],//文本域的valuetextareaValue:'',selectArr: ['北京','上海','湖北','廣東'],//select選中的地址address:''}//radioChange = (e)=>{this.setState({radioValue:e.target.value})}checkboxChange =(e)=>{//由于組件繼承的是purecomponent,因此要將數組復制一次let _checkArr = [...this.state.checkArr]if (e.target.checked) {//將所有選中的復選框的value值，push到一個數組（checkArr）中_checkArr.push(e.target.value)} else {//若取消選中，則將其從checkArr中減掉_checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)}//利用setState更新checkArrthis.setState({checkArr:_checkArr})}textareaChange=(e)=>{this.setState({textareaValue:e.target.value})}selectChange=(e)=>{this.setState({address:e.target.value})}submit =()=>{console.log(this.state);}render(){let checkInfo=["c1",'c2']let {radioValue,checkArr,textareaValue,selectArr,address } =this.statelet {checkboxChange} =thisreturn <div><div>性別：男<input type="radio" value='man' checked={radioValue=='man'?true:false}  onChange={this.radioChange}/>女<input type="radio" value='woman' checked={radioValue=='woman'?true:false} onChange={this.radioChange}/></div><div>{checkInfo.map(function(item,index){return <span>{item}<input type="checkbox" name='box' value={item} key={index} onChange={checkboxChange} checked={checkArr.indexOf(item)!==-1}></input></span> })}</div><div><textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea></div><div>地址:<select value={address} name="address" onChange={this.selectChange}>{selectArr.map(function(item,index){return <option key={index}>{item}</option>})}</select>   </div><button disabled={!radioValue || !address || !checkArr ||  !textareaValue } onClick={()=>this.submit()}>提交</button></div>}}ReactDOM.render(<Rtx />,document.getElementById('root1'))</script><!-- radio、
</body></html>

2.不受限組件

不受限組件：?沒有設置value（或者設為null）的input組件是一個不受限組件。杜宇不受限的input組件，渲染出來的元素直接反映用戶輸入

?使用defaultValue屬性不使用value可以實現不受限組件的雙向數據

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>非受限組件</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="root1"></div><script type="text/babel">//非受限組件class Rtx extends React.Component {state = {value: '123'}valueChange = (e) => {this.setState({ value: e.target.value })console.log(this.state.value);}render() {return <div><div><input type="text" /><input type="text" defaultValue={this.state.value} onChange={this.valueChange} /><p>{this.state.value}</p></div><div>性別：男<input type="radio" name='sex' value='man' />女<input type="radio" name='sex' value='woman' /></div></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script><!-- radio、checkbox、textarea、select --><div id="root1"></div><script type="text/babel">//表單元素的雙向綁定class Rtx extends React.Component {state = {//單選按鈕radioValue: '',//check選中的checkArr: [],//文本域的valuetextareaValue: '',selectArr: ['北京', '上海', '湖北', '廣東'],//select選中的地址address: ''}//radioChange = (e) => {this.setState({ radioValue: e.target.value })}checkboxChange = (e) => {//由于組件繼承的是purecomponent,因此要將數組復制一次let _checkArr = [...this.state.checkArr]if (e.target.checked) {//將所有選中的復選框的value值，push到一個數組（checkArr）中_checkArr.push(e.target.value)} else {//若取消選中，則將其從checkArr中減掉_checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)}//利用setState更新checkArrthis.setState({checkArr: _checkArr})}textareaChange = (e) => {this.setState({ textareaValue: e.target.value })}selectChange = (e) => {this.setState({ address: e.target.value })}submit = () => {console.log(this.state);}render() {let checkInfo = ["c1", 'c2']let { radioValue, checkArr, textareaValue, selectArr, address } = this.statelet { checkboxChange } = thisreturn <div><div>性別：男<input type="radio" defaultValue='man'  checked={radioValue == 'man' ? true : false} onChange={this.radioChange} />女<input type="radio" defaultValue='woman' checked={radioValue == 'woman' ? true : false} onChange={this.radioChange} /></div><div>{checkInfo.map(function (item, index) {return <span>{item}<input type="checkbox" name='box' defaultValue={item} key={index}onChange={checkboxChange}checked={checkArr.indexOf(item) !== -1}></input></span>})}</div><div><textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea></div><div>地址:<select defaultValue={address} name="address" onChange={this.selectChange}>{selectArr.map(function (item, index) {return <option key={index}>{item}</option>})}</select></div><button disabled={!radioValue || !address || !checkArr || !textareaValue} onClick={() => this.submit()}>提交</button></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script>
</body></html>

三、常用表單數據綁定

對相同邏輯的表單change事件進行封裝

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單提交</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="root1"></div><script type="text/babel">//非受限組件class Rtx extends React.Component {state = {name: 'fxt',sex:'1',address:'上海',textareaValue:'hello world'}//我們發現下面獲得改變值的方法都是一樣的，所以對一樣的邏輯函數進行封裝handleChange=(e)=>{console.log(e.target.name);let key = e.target.namethis.setState({[key]:e.target.value})// this.setState({[e.target.name]:e.target.value})}// getName=(e)=>{//     this.setState({name:e.target.value})// }// getSex=(e)=>{//     this.setState({sex:e.target.value})// }getAddress=(e)=>{this.setState({address:e.target.value})}getTextareaValue=(e)=>{this.setState({textareaValue:e.target.value})}submit = (e) => {// e.preventDefault();alert(JSON.stringify(this.state))}render() {let  selectArr=['北京', '上海', '湖北', '廣東']let {name,sex,address,textareaValue}=this.statereturn <div><form action=""><label for="">姓名：<input type="text" name='name' defaultValue={name} onChange={this.handleChange}/></label>  <label for=""><div>性別：<input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男<input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女</div></label>  <label for=""><div>地址:<select defaultValue={address} name="address" onChange={this.getAddress}>{selectArr.map( (item, index) =>{return <option key={index}>{item}</option>})}</select></div></label><label for=""><div>備注：<textarea name="" id="" defaultValue={textareaValue} cols="30" rows="10" onChange={this.getTextareaValue}></textarea>   </div></label><button disabled={!name || !address || !textareaValue || !sex} onClick={()=>{this.submit()} }>提交</button></form></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script>
</body></html>

四、注冊功能實現

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注冊表單驗證</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script><style>.error{color: red;}</style>
</head><body><div id="root1"></div><script type="text/babel">//非受限組件class Rtx extends React.Component {state = {name: '',nameError:"",passworld:'',passworldError:'',sex:'1',phone:'',phoneError:'',city:'北京',textareaValue:'hello world'}//單獨寫校驗規則的nameChange=(e)=>{let rule= /^[\w-]{4,10}$/ let value=e.target.valuelet error=''if(!value){error='請輸入昵稱'}else if(!rule.test(value)){error='請輸入4-10位的昵稱'}else{error=''}this.setState({name:value,nameError:error})}//進行校驗的表單元素統一封裝handleTest=(e)=>{let ruleArr={passworld:{rule:new RegExp(/^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/),text:'密碼',error:'6-12位，至少包括一個大小寫字母、數字、特殊字符'},phone:{rule:new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/),text:'手機號',error:'請輸入正確的手機號'}}let value=e.target.valuelet key = e.target.namelet ruleInfo={}let error=''Object.keys(ruleArr).map((el)=>{if(el==key){ruleInfo=ruleArr[key]}})if(!value){error='請輸入'+ruleInfo.text}else if(!ruleInfo.rule.test(value)){error=ruleInfo.error}else{error=''}this.setState({[key]:value,[key+'Error']:error})}//不進行校驗的表單通過自定義屬性實現獲得要設置的值的key鍵handleChange=(e)=>{console.log(e.target.name);let key = e.target.namethis.setState({[key]:e.target.value})// this.setState({[e.target.name]:e.target.value})}//提交想提交值submit = (e) => {e.preventDefault()//阻止默事件let {name,passworld,sex,phone,city,textareaValue} =this.statelet data={name,passworld,sex,phone,city,textareaValue}alert(JSON.stringify(data))}render() {let  selectArr=[{id:1,text:'北京'},{id:2,text: '上海'}, {id:3,text:'湖北'}]let {name,nameError,passworld,passworldError,sex,phone,phoneError,city,textareaValue}=this.statereturn <div><form action=""><label for="">昵稱：<input type="text" name='name' defaultValue={name} onChange={this.nameChange}/><span className='error'> * {nameError}</span></label>  <label for=""><div>密碼：<input type="text" name='passworld' defaultValue={passworld} onChange={this.handleTest}/><span className='error'> * {passworldError}</span></div></label>  <label for=""><div>性別：<input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男<input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女</div></label> <label for="">手機號：<input type="text" name='phone' defaultValue={phone} onChange={this.handleTest}/><span className='error'> * {phoneError}</span>    </label>  <label for=""><div>城市:<select defaultValue={city} name="city" onChange={this.handleChange}>{selectArr.map( (item, index) =>{return <option value={item.id} key={index}>{item.text}</option>})}</select></div></label><label for=""><div>備注：<textarea name="textareaValue" id="" defaultValue={textareaValue}  cols="30" rows="10" onChange={this.handleChange}></textarea>   </div></label><button disabled={!name || nameError|| !passworld || passworldError|| !sex || !phone ||phoneError || !city ||!textareaValue } onClick={this.submit }>提交</button></form></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script>
</body></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/712993.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/712993.shtml
英文地址，請注明出處：http://en.pswp.cn/news/712993.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

回溯例題（leetcode17/37）

回溯例題（leetcode17/37）

文章目錄 leetcode37leetcode17 回溯跟枚舉差不多。要注意“回溯”&#xff0c;別忘記“回”之前把之前的改動都復原。 leetcode37 leetcode37是解數獨問題。本題保證有且僅有唯一解。 思路&#xff1a;先把空格子的位置存下來&#xff0c;然后對每一個空位置挨個枚舉1-9。枚…
閱讀更多...
Excel常用公式總結非常實用

Excel常用公式總結非常實用

16個最實用的Excel萬能公式 1、多條件判斷 IF(And(條件1,條件2..條件N),條件成立返回值) IF(or(條件1,條件2..條件N),條件成立返回值) 2、多條件查找 Lookup(1,0/((條件1*條件2*...條件N)),返回值區域&#xff09; 3、多條件求和 Sumifs(值區域,判斷區域1,條件1,判斷區域2,條…
閱讀更多...
Java 數據庫面試題解析（下）

Java 數據庫面試題解析（下）

20. Hash索引和B樹索引的區別&#xff1f;【重點】 hash索引&#xff1a;等值查詢效率高&#xff0c;不能排序&#xff0c;不能進行范圍查詢&#xff1b; B樹索引&#xff1a;數據有序&#xff0c;適合范圍查詢。 21. MySQL中三種鎖的級別&#xff1f;【了解】 表級鎖&…
閱讀更多...
2024最新精華版Java面試題之spring篇

2024最新精華版Java面試題之spring篇

目錄 一、Java面試題之spring篇 1、什么是spring? 2、你們項目中為什么使用Spring框架&#xff1f; 3、 Autowired和Resource關鍵字的區別&#xff1f; 4、依賴注入的方式有幾種&#xff0c;各是什么? 5、講一下什么是Spring容器&#xff1f; 6、說說你對Spring MVC的理…
閱讀更多...
Java畢業設計-基于springboot開發的私人健身與教練預約系統-畢業論文+答辯PPT（有源代碼）

Java畢業設計-基于springboot開發的私人健身與教練預約系統-畢業論文+答辯PPT（有源代碼）

文章目錄 前言一、畢設成果演示&#xff08;源代碼在文末&#xff09;二、畢設摘要展示1.開發說明2.需求分析3、系統功能結構 三、系統實現展示1、系統功能模塊2、后臺功能模塊2.1管理員功能2.2用戶功能2.3教練功能 四、畢設內容和源代碼獲取總結 [Java畢業設計-基于springboot…
閱讀更多...
Android 11.0 內置google tts語音包功能實現

Android 11.0 內置google tts語音包功能實現

1.前言 在11.0的系統rom產品開發中，在gms的相關項目對于文字轉語音包功能不是內置功能，需要自己下載google的tts語音包，然后內置，在設置 google tts語音包apk作為默認的tts語音引擎功能，接下來分析實現這個功能 2.內置google tts語音包功能實現的核心類 frameworks/ba…
閱讀更多...
Chat GPT4.0：開啟智能對話的新紀元

Chat GPT4.0：開啟智能對話的新紀元

介紹 Chat GPT4.0是基于GPT4.0架構開發的一款強大的智能對話模型。作為人工智能領域的最新進展&#xff0c;Chat GPT4.0引領著智能對話技術的新紀元。本文將探討Chat GPT4.0的創新之處以及對智能對話發展的推動作用。 Chat GPT4.0的創新之處 Chat GPT4.0在前一版本的基礎上進…
閱讀更多...
c++知識點之 --引用

c++知識點之 --引用

本質&#xff1a;給變量起別名 語法&#xff1a;數據類型 &別名 原名 特點&#xff1a;傳引用比傳值的效率高很多 注意事項&#xff1a; 引用必須初始化&#xff0c;且初始化不能為空。引用不能改變引用關系&#xff08;引用的底層是指針常量&#xff08;type * const …
閱讀更多...
前端 JS 經典：for-in 和 for-of 用法區別

前端 JS 經典：for-in 和 for-of 用法區別

1. for-in 對于 string, object, array 類型使用 for-in const str "qwe"; const arr ["yqcoder", "db"]; const obj {name: "yqcoder",age: 18, };for (let i in str) {console.log(i); // 0 1 2 } for (let i in arr) {console…
閱讀更多...
簡單數據類型和復雜數據類型

簡單數據類型和復雜數據類型

1. 簡單數據類型 null是個特例: 2. 復雜數據類型 3. 堆和棧 注意&#xff1a; JavaScript 中是沒有堆和棧的概念的&#xff0c;通過堆棧的概念可以更好的理解代碼的一些執行方式&#xff0c;便于將來學習其他語言。 4. 簡單數據類型傳參 總結&#xff1a;簡單數據類型傳參傳…
閱讀更多...
webview_h5與原生增加權限索取行為交互(Flutter)

webview_h5與原生增加權限索取行為交互(Flutter)

應各大應用市場上架要求,增加權限索取行為用戶交互彈窗 詳細: https://developer.huawei.com/consumer/cn/doc/app/FAQ-faq-05#h1-1698326401789-0 flutter端使用permission_handler申請權限注冊一個MethodChannel,增加一個函數,提供安卓webview相機/麥克風等權限被觸發時回調…
閱讀更多...
C++寫入和讀取結構體到二進制文件

C++寫入和讀取結構體到二進制文件

二進制文件速度快&#xff0c;空間效率高 寫入數據到二進制文件 #include<iostream> #include<fstream> using namespace std; int main() {// 定義一個結構體struct student{int id; // 學號char name[20]; // 姓名double score; // 成…
閱讀更多...
LeetCode 2369.檢查數組是否存在有效劃分：動態規劃(DP)

LeetCode 2369.檢查數組是否存在有效劃分：動態規劃(DP)

【LetMeFly】2369.檢查數組是否存在有效劃分&#xff1a;動態規劃(DP) 力扣題目鏈接&#xff1a;https://leetcode.cn/problems/check-if-there-is-a-valid-partition-for-the-array/ 給你一個下標從 0 開始的整數數組 nums &#xff0c;你必須將數組劃分為一個或多個 連續 子…
閱讀更多...
在線ai寫作，讓你隨時隨地創作優質內容

在線ai寫作，讓你隨時隨地創作優質內容

如今的ai技術已經滲透到我們生活的方方面面。其中&#xff0c;AI寫作成為了一個備受關注的領域。如今&#xff0c;我們可以利用在線ai寫作在任何時間、任何地點創作出優質的內容。 傳統的寫作過程需要大量的時間和精力。從構思到寫作再到修改&#xff0c;每一個環節都需要我們投…
閱讀更多...
Linux進程管理——top字段

Linux進程管理——top字段

目錄 1.top下半部分——進程狀態 2.top常用內部命令 3.top指定 ①top ②top -d 1 ③top -d 1 -p 10126 ④top -d 1 -p 10126,1 4.使用信號控制進程 1.top下半部分——進程狀態 PID&#xff1a;進程號 User&#xff1a;用戶 PR/NI&#xff1a;優先級 VIRT&#xff08…
閱讀更多...
Helm repo 國內鏡像配置

Helm repo 國內鏡像配置

微軟 http://mirror.azure.cn/kubernetes/charts/ 阿里云 https://kubernetes.oss-cn-hangzhou.aliyuncs.com/charts/ 步驟 helm repo add stable http://mirror.azure.cn/kubernetes/charts/ helm repo add aliyun https://kubernetes.oss-cn-hangzhou.aliyuncs.com/char…
閱讀更多...
國產軟件很流氓？不，這些國產軟件良心且實用，別讓它們寒心

國產軟件很流氓？不，這些國產軟件良心且實用，別讓它們寒心

談及國產軟件&#xff0c;人們常將其與“流氓、捆綁、滿屏廣告”等負面詞匯掛鉤。但真實情況是&#xff0c;仍有許多優質國產軟件在默默耕耘&#xff0c;它們既免費又實用&#xff0c;別讓它們寒了心。 1、Dism Dism是一款專為Windows系統設計的管理優化神器&#xff0c;其開…
閱讀更多...
ECMAScript 6+ 新特性 ( 六 ) 模塊化

ECMAScript 6+ 新特性 ( 六 ) 模塊化

2.17. 模塊化 模塊化是指將一個大的程序文件&#xff0c;拆分成許多小的文件&#xff0c;然后將小文件組合起來。 這樣就可以更清晰和結構化的方式組織代碼 模塊功能主要由兩個命令構成&#xff1a;export 和 import export 命令用于規定模塊的對外接口 ( 公開 , 暴露) im…
閱讀更多...
PowerShell 詳細介紹

PowerShell 詳細介紹

PowerShell 是微軟開發的一款功能強大的命令行工具和腳本語言&#xff0c;它基于 .NET Framework 構建&#xff0c;可以幫助系統管理員和開發者自動化各種系統管理和應用程序開發任務。PowerShell 提供了豐富的命令集和腳本功能&#xff0c;可以輕松地管理 Windows 操作系統、應…
閱讀更多...
呦呵，阿里云果然是良心云

呦呵，阿里云果然是良心云

關注盧松松&#xff0c;會經常給你分享一些我的經驗和觀點。 你聽說了嗎?阿里云全線降價20%&#xff0c;還上了熱搜。2024年一開年&#xff0c;看來阿里云殺紅了眼&#xff0c;云市場即將變天。 現在續費的阿里云主機&#xff0c;續費三年和續費兩年的價錢差不多&#xff0…
閱讀更多...
最新文章

Copyright @ 2022~2023