前言

最近在學習React，做了一個簡單的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)省略掉的第一個參數。

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

添加效果

刪除后效果

總結

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。