用react做输入TODOS自动添加列表

适用于React初学者实现一个从输入框输入内容，自动添加列表的小案例

一般的TODOlist事项列表功能都是添加事项，完成事项，删除事项，查看分类事项，

我们暂时分类按照待完成事项和已完成事项，按照一个一个功能模块来完成，更加轻易上手

一、配置环境，建立一个index.js

搭建react环境，跑通环境

import React from 'react';

import ReactDOM from 'react-dom';

import Todo from './todo';

ReactDOM.render(,document.getElementById('root'));

二、建立todo.js父组件

先实现简单的添加功能，通过form表单实现

class Todo extends React.Component { 

 constructor(props){  

　  super(); 

  　 this.state={      items:[],      text:''    }

  } ;

 handleSubmit(e){   

        e.preventDefault();

       let newItem = this.refs.input.value.trim();  

       this.refs.input.value=null 　//清空内容   

       if (newItem==''&& !newItem) {      

             this.refs.input.focus();   

　　　  return alert('不能为空')   

        }　　//排除空值 

         this.state.items.push(newItem)　　//将输入的内容  

         this.setState({  items:this.state.items  })　

  }

 render () {    

     return(

       

           

Todo

 

       

             

              add#{this.state.items.length+1}

         

     

       )

  }

}

export default Todo;

三、简单的todolist.js子组件

实现简单的添加功能.props将父组件定义的数组items传过来，用es６的map遍历传递数组

export default class TodoList extends Component { 

　render() {   

　let list = this.props.items.map( (item,index) =>

       

{item}

)   

   return (

     

{list}

); 

}}

四.扩展删除功能

添加 todo.js 一个删除的方法

handleDel(i){

   this.state.items.splice(index,1)

   this.setState({

       items:this.state.items

  })

}

添加到 todolist.js 　中button组件按钮

let list = this.props.items.map( (item,index) =>

{item.title}

delete

五.添加完成事项功能

添加已完成事项选中的功能，用radio实现。

通过设置传入的item.completed　的true 或者false的值处理判断是否选中

添加方法

handleComponent(){

this.state.items[index].completed=!this.state.items[index].completed

this.setState({

items:this.state.items

})}

如下代码通过map将item　传入一个div中

let list = this.props.items.map( (item,index) =>      

{item.title}

删除

)

从todo.js传入删除方法和完成事项方法到todolist.js中

handleChange(i){

//传入一个方法，必须加ｉ，传入的形参

this.props.handleComponent(i)

}

handleDelete(i){

this.props.handleDel(i)

}

todo.js组件添加初始设定

constructor(props){

super();

this.state={

items:[

{title:'aa',completed:false},

{title:'bb',completed:true}//用completed的布尔值判断事项是否已完成

],

show:0}}

六、实现分类查看功能

我们分为待办事项和已完成事项，查看就可以查看全部事项，待办事项，已完成事项

首先我们定义添加三个按钮组件，"All","Active","Completed"

let name = ["All","Active","Completed"];　  　　　　　　　　　　　　　　　

let button = name.map( (item,index) =>

style = {this.state.show == index ? {backgroundColor:'#00bcd4'} : null}>{items}

在render中添加判断状态，０为all状态，１为Active　 2为Completed

if (this.state.show==0) {

var showItems=this.state.items;

}else if (this.state.show==1) {

var showItems=this.state.items.filter(function (element) {

return element.completed== false

})

}else {

var showItems=this.state.items.filter(function (element) {

return element.completed== true

})//`add# ${this.items.length+1}`

};

添加　handleShow功能

handleShow(i){

this.setState({show:i})

}

ＯＫ，现在一个事项添加几乎完成了，但是功能还不够完善，因为index值在分类查看时会出现问题，所以用id传值更加严谨，后续改善功能代码如下

完整的todo.js代码

class Todo extends React.Component { 

　constructor(props){ 

 　 super(); 

  　this.state={ 

    　 items:[     

       　　{title:'aa',completed:false,id:1},     

       　　{title:'bb',completed:true,id:2}   

  　　],     

     　show:0    }  } 

　handleSubmit(e){ 

   　 e.preventDefault();   

   　 let inputValue = this.refs.input.value.trim(); 

   　 this.refs.input.value=null //清空内容 

   　 if (inputValue==''&& !inputValue) {   

          　this.refs.input.focus();   

           　return alert('不能为空')    }　//排除空值 

    　let date = new Date; 

  　 let newItem={title:inputValue,completed:false,id:date.getTime()}   

   　this.state.items.push(newItem)　//将输入的内容   

   　 this.setState({  items:this.state.items  })　

  　} 

　handleComponent(id){ 

    　var index = this.state.items.findIndex(function(ele){ 

       　   return id == ele.id    })  

    　this.state.items[index].completed=!this.state.items[index].completed 　

  　this.setState({      items:this.state.items    }) 

} 

handleDel(id){   

 　  var index = this.state.items.findIndex(function(ele){ 

       　return id == ele.id 

   })   

  this.state.items.splice(index,1) 

  this.setState({      items:this.state.items    }) 

}

handleShow(id){ 

   　this.setState({show:id}) 

　}

render () { 

　  if (this.state.show==0) {     

　　　var showItems=this.state.items;   

　}else if (this.state.show==1) {     

　var showItems=this.state.items.filter(function (element) { 

      return element.completed== false     

})   

}else {   

　  var showItems=this.state.items.filter(function (element) {     

          return element.completed== true      })

   };     

  let name = ["All","Active","Completed"];     

  let button = name.map( (item,index) =>{item})  return(

       

Todo

       

            handleComponent{this.handleComponent.bind(this)}

            handleDel={this.handleDel.bind(this)}/>

       

       

      add#{this.state.items.length+1}

    {button}

  ) 

}}

export default Todo;

todolist.js代码如下

export default class TodoList extends Component {

handleChange(id){ 

　this.props.handleComponent(id)

}

handleDelete(id){

　  this.props.handleDel(id)

} 

render() {   

let list = this.props.items.map( item =>  

{this.handleChange.bind(this,item.id)} />

null}>{item.title}

删除

)   

return (

{list}

);  }}

成功完成功能，后续样式可以自己修改了！