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

前言

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

實(shí)現(xiàn)功能

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

實(shí)現(xiàn)思路

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

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

實(shí)現(xiàn)過程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

添加效果

刪除后效果

總結(jié)

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)億速云的支持。