功能描述：

      我們在一個輸入框輸入內容，然後點選新增按鈕，此輸入框的內容就會新增到頁面上，但是此輸入框中還存在上次輸入的內容，我們想在每次輸入新增完成之後，此輸入框中的內容就會清除，如圖：

實現思路：

      我們可以先在輸入框上定義一個onChange事件，此事件通過一個e引數來獲取到輸入框中的內容，將它儲存在一個變數中，然後每次點選按鈕就會動態的在list陣列中增加輸入框中的內容。

       實現輸入框內容清除功能的話，可以在list中增加完內容後將此變數值設定為空，然後將此變數和輸入框的value屬性做繫結即可，如圖：

      定義一個變數存放輸入框內容：

constructor(props){ //元件初始化函式，一呼叫元件就自動執行
super(props); //初始化一些引數，不必理會
this.state={ //定義state來存放資料
list:[


],
reactid:0, //此引數主要是解決key的報錯問題而定義
inputValue:''
}
}

      onChange事件儲存輸入框內容：

handleInputValue(e){
this.setState({
inputValue:e.target.value
})
}
 

      點選按鈕增加頁面內容，同時變數值為空：

handleBtnClick(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
});
}

      繫結value屬性：

<input value={this.state.inputValue} onChange={this.handleInputValue.bind(this)}/>