react改变checkbox的文字类型_使用React编写一个ToDoList应用程序（一） 首页

组件化是React.js的最大的特性，其目的就是为了能够进行复用，减少代码的冗余。刚刚学习了ToDoList的编写，然后在记录下来，算作一个技术的分享。 功能：

1. 通过键入，可以在列表中新加入代办事项

2. 如果代办事项为空，则只显示标题和键入框

3. 通过勾选代办事项前的checkBox表示该代办事项已经完成

4. 双击代办事项可以更改代办事项的内容

5. 点击按钮可以删除该代办事项

6. 底部显示未完成和已完成的数量

7. 可以一键清除所有已完成的事项

本文不涉及css部分，只针对js部分

首先先看最终呈现出的效果

分析上图效果可以得出，ToDoList可以拆出四个模块(如下图所示)，分别是：1、标题 ----------  Title2、输入框 -------  Create3、列表  ----------  Todos4、底栏  ----------  State

---

一、使用类式组件

---

---

首页

在首页中先引入四个组件

render() {        return (

"todoapp">                                                                                            

) }

并在首页的state中定义数据项

constructor(props) {        super(props);        this.state = {            data:[{              id:xxxx1,              txt:'去买菜',              done:false            }]        };    }

数据项的定义：

• id-每一个代办事项都会有一个唯一的id

• txt-代办事项的内容

• done-代办事项是否完成

通过需要的功能，在首页写下对应功能所需要的函数，并放入对应的组件中

• 通过键入，可以在列表中新加入代办事项

• •  addDate(添加数据        

    • getRandomCode是得到16为随机ID

    • 这个只需要传入一个代办事项中的txt就可以了

    • ID是随机生成的，done的值默认是false

getRandomCode() {        var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];        var nums = "";        for (var i = 0; i < 15; i++) {            var r = parseInt(Math.random() * 61);            nums += data[r];        }        return nums;    }    addDate = (text) => {        let {data} = this.state;        data.push({            id: this.getRandomCode(),            txt: text,            done: false        });        this.setState({            data: data,         })    }

• 通过勾选代办事项前的checkBox表示该代办事项已经完成

• • changeDone  --  通过changeDone来改变data中done的值

    • 传入的参数是id和done

      • id来确定改变哪一条代办事项的状态

      • done就是改变成true或者false

    changeDone = (id, done) => {        let {data} = this.state;        data.forEach(item => {            if (item.id === id) {                item.done = done;            }        })        this.setState({            data: data        })    }

• • 双击代办事项可以更改代办事项的内容

    • editTxt  --  通过editTxt来改变data中txt的值

      • 传入的参数是id和txt

        • id来确定改变哪一条代办事项的值

        • txt是更新后的代办事项的值

    changeDone = (id, done) => {        let {data} = this.state;        data.forEach(item => {            if (item.id === id) {                item.done = done;            }        })        this.setState({            data: data        })    }

• 点击按钮可以删除该代办事项

  •  remove --  通过remove来删除data中的对应

  • • 传入的参数是id

      • id来确定删除哪一条代办事项

        • filter只会保留条件为true的结果

        • 在这个例子中就是item.id !== id

          • data中的id只要和要删除的id不一样就会被保留

remove=(id)=>{    let {data} = this.state;    data = data.filter(item => item.id !== id);    this.setState({        data,    })}

• 可以一键清除所有已完成的事项

  •  removeDown --  通过removeDown来删除data中所有已经完成的项目

  • • 传入的参数为空

      • 因为每一条代办事项都有一个done的属性，所以这里要清除所有已经完成的事项，就只需要过滤出done为false的项目

removeDown=()=>{        let {data} = this.state;        data = data.filter(item => item.done == true);        this.setState({            data,        })    }

---

因为 如果代办事项为空时 只 显示 标题和键 入框，则在 Create 和 State 的组件 前面 引入一个三目运算

{data.length > 0 ?  : "">

当data的长度大于0的时候，显示其组件，否则就显示空。根据功能，把函数分配给各个组件：

• • 输入框 ------- Create

    • addDate

  • 列表 ---------- Todos

    • changeDone

    • editTxt

    • remove

  • 底栏 ---------- State

    • removeDown

除了需要更改状态的函数外，在列表和低栏组件内需要传入data的值 现render中各个组件的方法如下代码片段所示：

render() {        let {data} = this.state;        return (

"todoapp">

"content">                    this.addDate}/> {data.length > 0 ? data={data} changeDone={this.changeDone} editTxt={this.editTxt} remove={this.remove}                    /> : ""} {data.length > 0 ? data={data} removeDown={this.removeDown} /> : ""}

) }

这仅仅只是ToDoList中的首页部分，仅仅只是把所需要的功能列出来和函数，组件内的方法会在下一篇推文中展示。

这算是我写的第一篇技术类的文章，如有不对的地方还请多多包涵。

这算是在学习React的过程中的一个记录和总结。

希望可以有技术方面的探讨。

谢谢大家的阅读。