React实现todolist效果

最新推荐文章于 2024-06-26 16:11:39 发布

Honey-回忆天明

最新推荐文章于 2024-06-26 16:11:39 发布

阅读量630

点赞数

分类专栏： javascript React 文章标签： react todolist

本文链接：https://blog.csdn.net/Honey_tianming/article/details/90546685

版权

javascript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

React

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./build/react-0.14.0.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    class Todolist extends React.Component{
       constructor(props){
         super(props)
         this.state={
            todolists:[    
            {text:'早上九点上班'},
            {text:'下午两点上班'},
            {text:'晚上七点下班'} 
            ]
         }
         this.addTodo=this.addTodo.bind(this)
         this.deleteTodo=this.deleteTodo.bind(this)  
       }

       addTodo(e){
        if(e.keyCode==13){
          console.log(e.target.value)
          if(e.target.value!=''){
            var todo = {text:e.target.value}
            this.state.todolists.push(todo)
            this.setState({
              todolists:this.state.todolists  
            })
            e.target.value='' 
          }
        }  
      }

      deleteTodo(e){
       var index= e.target.className
       console.log(index)
       this.state.todolists.splice(index,1)
       this.setState({
         todolists:this.state.todolists  
       })
       e.target.className=''
      }


       render(){
         return(
            <div>
            <input type="text" placeholder="请输入您的计划"  onKeyUp={this.addTodo} />
            <ol>
               {
                this.state.todolists.map((item,index)=>{
                  return (<li key={index}>{item.text}<span style={{color:'red',marginLeft:'15px'}} className={index} onClick={this.deleteTodo}>删除</span></li>)
                })               
              }
            </ol>
            </div>
         )
       }
    }
    var app = document.getElementById('app')
    ReactDOM.render(
      <Todolist/>,
      app        
    )
  </script>   
</body>
</html>

效果如图
在这里插入图片描述