react实现Todolist的增加和删除功能

效果如上所示

import React,{Component} from 'react';

import '../assets/css/index.css';

 

class Todolist extends Component{

    constructor(props){

        super(props);

        this.state={

          list:[]

        }

    }

    addData=()=>{

    //   alert(this.refs.title.value);

      var templist=this.state.list;

      templist.push(this.refs.title.value);//这个数据的返回值索引值

      this.refs.title.value='';

      //把表单的值赋值给了list

      this.setState({

          list:templist

      })

    }

    removeData=(key)=>{

      //首先获取到当前的数据

      var templist=this.state.list;

      templist.splice(key,1);

      //删除之后重新将数据赋值给list

      this.setState({

          list:templist

      })

    }

 

    render(){

        return(

            <div>

                <h2>React Todolist演示案例</h2>

                <input ref="title"/> <button onClick={this.addData}>增加</button>

                <hr/>

                <ul className="list">{

                    //这里要注意this的指向问题

                    this.state.list.map((value,key)=>{

                        return(

                                <li key={key}>{value}<button onClick={this.removeData.bind(this,key)}>删除</button></li>

                        )

                    })

                }

                    

                </ul>

            </div>

        )

    }

}

 export default Todolist;

 

这里要重点关注的是this的指向问题