今天目的

今天要刪除功能實踐，廢話不多說直接開始。

Todolist.js 函數 handleClick改寫

新增this.props.onItemClick把ID傳給父組件統一處理。

  handleClick = (e) => {
    console.log(e.target.id); //抓到btn當前ID
   //實際上呼叫的是由上層元件從props.onItemClick傳入的方法(上層元件的方法)
   this.props.onItemClick(e.target.id);//傳給父組件處理拿到要刪除的索引值
}

App.js 畫面部分

把昨天單獨拿出來的地方，現在合併起來了。

  render() {
    const {searhItem,handleContent,addItem,deleteItem} = this,
    {content,item} = this.state;

    
    return(
      <div>
        <label>文字輸入</label>
        <input type="text" 
          placeholder="addItem..."
          value={content}  
          onChange={handleContent}
           />
            <button onClick={addItem}>addItem</button> 
        <br/>
       <Searchbar  onsearh ={searhItem}/> {/* 從子組件 接收onsearh事件 */}
       <Todolist item={item} onItemClick={deleteItem} />
      </div>
    );
  }
}

deleteItem函數

這個k，是從Todolist.js的handleClick函數傳裡的ID，我們把ID抓取後拿來山陣列資料，
這樣就可以實現刪除功能。

  deleteItem = (k) =>{ //傳進當前按鈕按下後的索引值
    console.log('k',this.state.item[k]); //拿到陣列的值
    // delete this.state.item[k];
    this.state.item.splice(k, 1);// 刪除1筆 資料 splice(當前索引,刪幾筆)
    console.log('刪除陣列裡當前索引值的資料',this.state.item);
    this.setState({
      item:this.state.item,//改變陣列
      searhitem:this.state.item
    })
  }

呈現結果

參考資料:自己