這篇文章主要介紹如何使用React實現(xiàn)一個完整的TodoList，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為太原等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及太原網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都做網(wǎng)站、太原網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一. 首先根據(jù)效果圖講一下要實現(xiàn)的功能吧

todoList最終效果圖

（1）可以添加任務(wù)；
（2）已完成任務(wù)以及未完成任務(wù)的顏色區(qū)分開；
（3）進行添加任務(wù)，修改任務(wù)狀態(tài)，以及刪除任務(wù)時，下面的任務(wù)完成數(shù)目和任務(wù)總數(shù)要進行變化；

以上就是要實現(xiàn)的功能。

二. 接下來該如何設(shè)計呢？

（1）任務(wù)存儲的數(shù)據(jù)結(jié)構(gòu)：

list: [{
      id: 0,
      name: '吃飯',
      status: 0
    }, {
      id: 1,
      name: '睡覺',
      status: 0
    }, {
      id: 2,
      name: '打豆豆',
      status : 0
    }]

每個任務(wù)都有自己的id，任務(wù)名，以及任務(wù)的狀態(tài)，任務(wù)的id除了標(biāo)識任務(wù)的唯一性，還可以作為列表項的key值。我們都知道在react中使用列表，列表的每一項必須有個key值，這樣會使得每個列表項可以快速定位，在執(zhí)行Diff算法時減少不必要的查詢，從而對性能的提升有所幫助。

（2）組件的劃分

1. TodoList整體作為一個大組件；

2. 列表中的每個列表項（ListItem）作為一個組件；

3. 任務(wù)的添加框（Dialog）作為一組件。

三. 具體實現(xiàn)

以列表項ListItem的實現(xiàn)為例：

將列表項單獨劃分為一個組件是必須的，這樣使得每個單獨的條目都是獨立的，使得代碼的邏輯更加簡單，增強代碼的復(fù)用性，維護也會變得更簡單。

當(dāng)然聰明的你肯定會想到一個問題：每一個Task的狀態(tài)改變或者Task的添加刪除，Task的完成數(shù)目和總數(shù)目都是會改變的，可是每個ListItem都是相互獨立的，如何實現(xiàn)呢？這時就要用到父子組件之間的通信了。

如果你也是和我一樣React的初學(xué)者，百度一下就會出現(xiàn)很多文章都會講父子組件間如何通信，下面我簡單說一下自己簡單粗暴的理解：

在父子組件中定義改變state數(shù)據(jù)的方法，將方法以props的形式傳遞給子組件，在子組件中觸發(fā)事件處理程序，然后滿足某種條件的話就執(zhí)行父組件傳來的函數(shù)。

具體代碼如下：

父組件中的代碼：

import React, { Component } from 'react';
import ListItem from './listItem';
import Dialog from './dialog';
import './main.css';

class TodoList extends Component {
  constructor (props) {
    super(props);
    
    //初始任務(wù)列表
    this.state = {
      list: [{
        id: 0,
        name: '吃飯',
        status: 0
      }, {
        id: 1,
        name: '睡覺',
        status: 0
      }, {
        id: 2,
        name: '打豆豆',
        status : 0
      }],
      finished: 0
    };
  }
  
  //添加新任務(wù)，在組件中以props的形式傳遞給子組件
  addTask (newitem) {
    var allTask = this.state.list;
    allTask.push(newitem);
    this.setState({
      list: allTask
    });
  }
  //更新完成的任務(wù)，在組件中以props的形式傳遞給子組件
  updateFinished (todoItem) {
    var sum = 0;
    this.state.list.forEach( (item) => {
      if (item.id === todoItem.id) {
        item.status = todoItem.status;
      }
      if (item.status === 1) {
        sum++;
      }
    });
    this.setState({
      finished: sum
    });
  }

  //更新任務(wù)總數(shù)，在組件中以props的形式傳遞給子組件
  updateTotal (todoItem) {
    var obj = [], sum = 0;
    this.state.list.forEach((item) => {
      if (item.id !== todoItem.id) {
        obj.push(item);
        if (item.status === 1 ) {
          sum++;
        }
      }
    });
    this.setState({
      list: obj,
      finished: sum
    });
  }

  render () {
    return (
      <div className="container">
        <h2>TodoList</h2>
        <ul>
          { this.state.list.map ((item, index) =>
            <ListItem 
              item={item} 
              finishedChange={this.updateFinished.bind(this)} 
              totalChange={this.updateTotal.bind(this)}
              key={index}
            />
          )}
          <li>{this.state.finished}已完成 / {this.state.list.length}總數(shù)</li>
        </ul>
        <Dialog addNewTask={this.addTask.bind(this)} nums={this.state.list.length}/>
      </div>
    );
  }
}

export default TodoList;

子組件中的代碼：

import React, { Component } from 'react';

class ListItem extends Component {
  constructor (props) {
    super(props);

    this.handleFinished = this.handleFinished.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  } 

  handleFinished () {
    var status = this.props.item.status;

    status = (status === 0 ? 1 : 0);

    var obj = {
      id: this.props.item.id,
      name: this.props.item.name,
      status: status
    }
    
    this.props.finishedChange(obj); //執(zhí)行父組件傳來的方法
  }

  handleDelete () {
    this.props.totalChange(this.props.item); //執(zhí)行父組件傳來的方法
  }

  render () {
    const item = this.props.item;

    const unfinish = {
      backgroundColor: '#DFFCB5',
      color: '#2EB872',
    };

    const finish = {
      backgroundColor: '#FFFA9D',
      color: '#FF9A3C',
      textDecoration: 'line-through'
    }

    var itemStyle = item.status === 0 ? unfinish : finish;
    
    return (
      <li key={item.id} style={itemStyle}>
        <span 
          onClick={this.handleFinished} 
          id={item.id}
          className="check-btn"
          style={{backgroundColor: item.status === 0 ? '#fff' : '#A1EAFB'}}
        ></span>
        <span>{ item.name }</span>
        <span onClick={this.handleDelete} className="delete-btn">刪除</span>
      </li>
    );
  }
}

export default ListItem;

以上是“如何使用React實現(xiàn)一個完整的TodoList”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：如何使用React實現(xiàn)一個完整的TodoList-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://aaarwkj.com/article8/ppiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、微信公眾號、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)