終於，終於，要來to-do-list了

話不多說，來看code吧！
code的參考來源：https://codepen.io/Tiendq/pen/jMerWZ?editors=0010

首先是我們主要的組件，一樣，一眼略過！

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      items: [],
      text: "",
      id: 0,
    };
    
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleAddItem = this.handleAddItem.bind(this);
    this.handleDeleteItem = this.handleDeleteItem.bind(this);
  }

  handleTextChange(event) {
    this.setState({
      text: event.target.value
    });
  }

  handleAddItem(event) {
    event.preventDefault();
    
    var newItem = {
      id: this.state.id,
      text: this.state.text,
      done: false
    };
    
    this.setState((prevState) => ({
      items: prevState.items.concat(newItem),
      text: "",
      id:this.state.id+1
    }));
  }

  handleDeleteItem(itemId) {
    var updatedItems = this.state.items.filter(item => {
      return item.id !== itemId;
    });
    
    this.setState({
      items: [].concat(updatedItems),
      id:this.state.id-1
    });
  }
  render() {
    return (
      <div>
        <h3>TO DO LIST</h3>
        <form>
          {/* input要取值 */}
          <div>
            <input type="text" onChange={this.handleTextChange} value={this.state.text} />
          </div>
          {/* 點擊加上todo */}
          <div>
            <button onClick={this.handleAddItem} disabled={!this.state.text}>{"Add to-do #" + (this.state.items.length + 1)}</button>
          </div>
        </form>
        <div>
          <div>
            <TodoList items={this.state.items} onItemCompleted={this.markItemCompleted} onDeleteItem={this.handleDeleteItem} />
          </div>
        </div>
      </div>
    );
  }
}

那麼，首要就是先建立一個存放todos的array，並且將我們會用的function綁起來。
根據昨天的規劃，我們要先

1. 抓到input了什麼todo
2. 把他加進去我們的todolist裡面
3. 如果想，我們可以刪掉他

所以就會有三個function：抓取input的值、增加todo、刪除todo。

  constructor(props) {
    super(props);
    
    this.state = {
      items: [],
      text: "",
      id: 0,
    };
    
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleAddItem = this.handleAddItem.bind(this);
    this.handleDeleteItem = this.handleDeleteItem.bind(this);
  }

抓取input的值

透過event.target.value(這是js)，把抓到的值透過setState放到text裡面（剛剛建好了）。

  handleTextChange(event) {
    this.setState({
      text: event.target.value
    });
  }

將todo新增到列表裡面

把剛剛抓取到的text，送到一開始建立好的todolist的array裡面。
並且把id加1（id一定要操作，因為在react裡面，key需要獨一無二）

  handleAddItem(event) {
    event.preventDefault();
    
    var newItem = {
      id: this.state.id,
      text: this.state.text,
    };
    
    this.setState((prevState) => ({
      items: prevState.items.concat(newItem),
      text: "",
      id:this.state.id+1
    }));
  }

刪除todo

就是刪除todo......然後把id-1。

  handleDeleteItem(itemId) {
   var updatedItems = this.state.items.filter(item => {
     return item.id !== itemId;
   });
   
   this.setState({
     items: [].concat(updatedItems),
     id:this.state.id-1
   });
 }

Return

我們先return一個input，並且把剛剛抓取值的function用onChange綁定，然後value綁定text。

   <div>
   <input type="text" onChange={this.handleTextChange} value={this.state.text} />
   </div>

接著點擊事件綁定剛剛新增todo的function，並設定如果input沒有東西就不能點擊。

   <div>
       <button onClick={this.handleAddItem} disabled={!this.state.text}>
       {"Add to-do #" + (this.state.items.length + 1)}
       </button>
   </div>

最後回傳子組件<TodoList>並且把存todos的array傳給它，以及刪除該todo的function也傳進去。

  <div>
   <TodoList items={this.state.items} onDeleteItem={this.handleDeleteItem} />
 </div>

那麼，我們今天已經完成了主要的組件的設計，明天只需要把list跟item也寫完，就搞定了！