1. 程式人生 > >React實現表單資料的新增與刪除

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

最近在學習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)省略掉的第一個引數。
好了,大功告成,讓我們一起來看下效果吧…