React實現表單資料的新增與刪除

zhou_xiao_cheng發表於2016-09-01
React

本文原創地址連結：http://blog.csdn.net/zhou_xiao_cheng/article/details/52401661，未經博主允許不得轉載。

最近在學習React,做了一個簡單的Demo，寫成部落格，用以自勉。Demo功能：在輸入框中輸入資料後，點選儲存按鈕，資料將會逐一顯示在輸入框下方，點選儲存後顯示的任何一條資料，該資料即可被刪除。

實現思路

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

  1. 點選儲存按鈕時，輸入框中的資料讀取，可通過onChange繫結事件，獲得輸入框資料：e.target.value
  2. 自定義一個事件，輸入資料後，點選儲存按鈕時，資料的儲存操作交由該事件完成
  3. 當不斷點選儲存按鈕時，資料應該是多個的，可選用陣列來儲存資料
  4. 陣列中，陣列的索引是唯一表示一個資料的方式，資料的操作可通過索引進行

實現過程

class ReactDemo extends React.Component{
  render(){
    return(
      <div>
        <input />
        <button>點選儲存</button>
      </div>
    )
  }
}
ReactDOM.render(<ReactDemo />,document.getElementById('app'))

這是本次Demo的雛形，接下來我們將會在這上面一點一點地做修改，進行功能的完善。
此時，表單為非受控元件，也就是普通的元件，在輸入框中輸入任何資料，在輸入框內均會顯示。
React元件提供了this.state以及this.setState，利用它們，我們可以十分方便地管理、更新元件的狀態。

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

this.state通常在建構函式內部進行初始化，其值為物件，本例中，val用於儲存輸入框中的值，初始值為空字串；arr是個資料，用於儲存多個資料。

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

這裡，this.setState會將val的值更新為e.target.value,當元件狀態值（這裡為val）發生改變，元件就會自動呼叫render()重新渲染UI 。

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

展開運算子(…)是ES6的語法，它允許一個表示式在某處展開，利用這一特性，可將陣列元素逐一展開：...this.state.arr,讓val總是成作為陣列的第一個元素，組成新陣列[val, ...this.state.arr]後，賦給arr。

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

通過陣列的索引對資料進行刪除操作，[].filter()接受一個方法作為它的引數，並返回匹配條件（index ！== i）的元素組成的新陣列。

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

這種JSX的語法是由facebook官方提出的一種十分簡明的寫法，個人覺得好用到爆。[].map()對陣列元素依次進行函式的呼叫，並返回函式呼叫結果組成的新陣列。bind(this,index)的第二個引數index為原函式onDelete(index,e)省略掉的第一個引數。
好了，大功告成，讓我們一起來看下效果吧…

參考資料：
https://facebook.github.io/react/docs/forms.html
http://javascript.ruanyifeng.com/stdlib/array.html#toc14

相關文章