handleDelete(){
    this.props.delete(this.props.index);
}

ES6的結構賦值

handleDelete(){

}

但 delete因為是個 reserved word，所以頁面會報錯，所以先不改了

render(){
    return(
        <div onClick={this.handleDelete}>{this.props.content}></div>
     )
 }

可以使用 ES6的結構賦值     

render(){
    return(
        
        <div onClick={this.handleDelete}>></div>
     )
 }

把代碼寫漂亮一點，把 return 加個括號

程式中有很多地方使用 .bind(this)

例如:
<input onChange={this.handleInputChange.bind(this)}
實際上這麼寫 React 代碼的性能會稍微有些影響，所以不建議。

我們可以在 constructor 裡面寫
this.handleInputChange = this.handleInputChange.bind(this);
事先就做好 this 指向的改變

因此就在原本的寫法就沒必要再寫 .bind(this)
<input onChange={this.handleInputChange}

handleDelete(index) 方法

子組件使用父組件傳遞過來的方法
this.props.delete(this.props.index);

列表到底顯示多少項，是由父組件的 list 數據決定的。

當你點擊子組件的時候，希望實踐刪除功能，所以子組件要告訴父組件要刪除 list 裡面的某個數據。

子組件如果要和父組件通信，子組件要調用父組件傳遞過來的方法。

<TodoItem delete={this.handleDelete.bind(this)} ....>

子組件通過 props 的形式來接受到父組件傳遞過來的參數。

TodoItem接受你傳遞過來的 content 的內容

{this.props.content}

父組件透過屬性的形式向子組件傳遞參數

此例為：
以一個 content 參數的形式傳給 TodoItem

儘量不要直接修改state裡面的數據，而是生成一個副本去修改後再去賦值

ES6中，若鍵和值同名稱，可以省略成
this.setState({list})

<li key={index} onClick={this.handleItemDelet.bind(this,)}>{item}</li>

把 index參數傳進去

再完善一點

當按下 add 按鈕後，要把 input 框的內容清掉
inputValue:''

並且我要讓我的 input 對應的 value值再和 this.state.value 做一個綁定，也就是只要 inputValue發生了變化，我的 value值就變了，那麼頁面上 input框裡面的內容就改變了

<input value={this.state.inputValue} ...

state 裡面再增加一個數據 inputValue

當input恇只要有變化，就會觸發 onChange這個事件並且會接收一個 event 事件對象。當我拿到值的時候，我要去改 inputValue 變成 e.target.value 。這樣只要 input 框發生變化，那麼我的數據項裡面的 inputValue 就會變成 input框裡面的內容。

然後我再去點擊按鈕新增的時候，這時 hello world 我們可以換個內容， this.state.inputValue 就可以了

雖然沒有報錯了，但按下 add按鈕，沒有添加數據

在 REACT 中要改變 state 裡面的數據，你不要直接調用 this.state.list.push('hello world')去改變數據，而是要使用 REACT 提供給我們的方法：

this.setState(
)

範例中使用 ES6 語法， ... 表示展開運算符，也就是把之前 list 裡面的三個資料放在前面，也就是新的 list 裡面會包含老的 list內容，同時又往 list 裡面增加 hello world 內容。

當數據發生變化的時候，React會自動重新的執行 render函式來渲染畫面

報錯 ：找不到 this.state

因為當 button被點擊的時候，是指向 TodoList 組件，但當這個handleBtnClick() 函數運行的時候，裡面的this是指向 button這個按鈕了，而這個 button當然沒有 state 這個東西。

我們點擊 button 運行 handleBtnClick() 的時候，函數裡面的this指向 TodoList 不要指向 button，我們可以這樣寫，我讓這函數的this和外層的this綁定。

this.handleBtnClick.bind(this)