基于React實現(xiàn)表單數(shù)據(jù)的添加和刪除詳解

前言

專注于為中小企業(yè)提供網(wǎng)站制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)同安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

最近在學(xué)習(xí)React，做了一個簡單的Demo，用以自勉及和有需要的朋友們參考學(xué)習(xí)。

實現(xiàn)功能

在輸入框中輸入數(shù)據(jù)后，點(diǎn)擊保存按鈕，數(shù)據(jù)將會逐一顯示在輸入框下方，點(diǎn)擊保存后顯示的任何一條數(shù)據(jù)，該數(shù)據(jù)即可被刪除。

實現(xiàn)思路

在開始實現(xiàn)之前，我們需要理清我們的思路，這樣才能更好地去完成預(yù)定功能。

1. 點(diǎn)擊保存按鈕時，輸入框中的數(shù)據(jù)讀取，可通過onChange綁定事件，獲得輸入框數(shù)據(jù)：e.target.value
2. 自定義一個事件，輸入數(shù)據(jù)后，點(diǎn)擊保存按鈕時，數(shù)據(jù)的存儲操作交由該事件完成
3. 當(dāng)不斷點(diǎn)擊保存按鈕時，數(shù)據(jù)應(yīng)該是多個的，可選用數(shù)組來存儲數(shù)據(jù)
4. 數(shù)組中，數(shù)組的索引是唯一表示一個數(shù)據(jù)的方式，數(shù)據(jù)的操作可通過索引進(jìn)行
   

實現(xiàn)過程

class ReactDemo extends React.Component{
 render(){
 return(
  <div>
  <input />
  <button>點(diǎn)擊保存</button>
  </div>
 )
 }
}
ReactDOM.render(<ReactDemo />,document.getElementById('app'))

這是本次Demo的雛形，接下來我們將會在這上面一點(diǎn)一點(diǎn)地做修改，進(jìn)行功能的完善。

此時，表單為非受控組件，也就是普通的組件，在輸入框中輸入任何數(shù)據(jù)，在輸入框內(nèi)均會顯示。

React組件提供了this.state以及this.setState，利用它們，我們可以十分方便地管理、更新組件的狀態(tài)。

 constructor() {
 super()
 this.state = {
  val: '',
  arr: []
 }
 }

this.state通常在構(gòu)造函數(shù)內(nèi)部進(jìn)行初始化，其值為對象，本例中，val用于保存輸入框中的值，初始值為空字符串；arr是個數(shù)據(jù)，用于存儲多個數(shù)據(jù)。

 handleData(e) {
 this.setState({
  val: e.target.value
 })
 }

這里，this.setState會將val的值更新為e.target.value,當(dāng)組件狀態(tài)值（這里為val）發(fā)生改變，組件就會自動調(diào)用render()重新渲染UI 。

 onButtonClick(e) {
  var val = this.state.val
  this.setState({
  arr: [val, ...this.state.arr]
  })
 }

展開運(yùn)算符(…)是ES6的語法，它允許一個表達(dá)式在某處展開，利用這一特性，可將數(shù)組元素逐一展開：...this.state.arr,讓val總是成作為數(shù)組的第一個元素，組成新數(shù)組[val, ...this.state.arr]后，賦給arr。

 onDelete(index, e) {
 this.setState({
  arr: this.state.arr.filter((elem, i) => index !== i)
 })
 }

通過數(shù)組的索引對數(shù)據(jù)進(jìn)行刪除操作， [].filter()接受一個方法作為它的參數(shù)，并返回匹配條件（index ！== i）的元素組成的新數(shù)組。

 {arr1.map((i,index) =>(
 <div onClick={this.onDelete.bind(this,index)}>{i}</div>
 ))}

這種JSX的語法是由facebook官方提出的一種十分簡明的寫法，個人覺得好用到爆。[].map()對數(shù)組元素依次進(jìn)行函數(shù)的調(diào)用，并返回函數(shù)調(diào)用結(jié)果組成的新數(shù)組。bind(this,index)的第二個參數(shù)index為原函數(shù)onDelete(index,e)省略掉的第一個參數(shù)。

好了，大功告成，讓我們一起來看下效果吧…

添加效果

刪除后效果

總結(jié)

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

分享標(biāo)題：基于React實現(xiàn)表單數(shù)據(jù)的添加和刪除詳解
文章URL：http://bm7419.com/article44/pcdghe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)頁設(shè)計公司、做網(wǎng)站、企業(yè)建站、搜索引擎優(yōu)化、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)