React写个Todolist

jq、vue都写过了，用React也整一个吧，集齐todolist，召唤神龙。
在写的过程中发现并不是“那么简单”
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #root {
    width: 800px;
    height: 1000px;
    outline: springgreen solid;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .title,
  .search {
    text-align: center;
  }

  .search input {
    width: 300px;
    height: 30px;
    outline: none;
  }

  .search button {
    width: 50px;
    line-height: 32px;
    border: none;
    background: rgb(90, 181, 224);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .list-header {
    margin-top: 20px;
  }

  .list {
    display: flex;
    width: 100%;
  }

  .list-title {
    width: calc(100%/3);
    text-align: center;
    outline: rgb(27, 27, 27) solid 0.5px;
    line-height: 35px;
  }

  .done {
    text-decoration: line-through;
    display: flex;
    width: 100%;
  }

  .finish,
  .delete {
    border: none;
    border-radius: 5px;
    line-height: 25px;
  }

  .finish {
    background: rgb(139, 218, 20);
  }

  .delete {
    background: rgb(219, 64, 64);
    margin-left: 5px;
  }
</style>

<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- jsX语法 -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
  class ListItem extends React.Component{
    constructor(props){
      super(props)
      console.log(this.props)
      this.handelDone = this.handelDone.bind(this)
    }
    handleDel(){
      this.props.handleDelete(this.props.id)
    }
    handelDone(){
      this.props.handelDone(this.props.id)
    }
    render(){
      return(
        <div className="list" className={this.props.status==1?'done':'list'}>
             <div className="list-title">{this.props.time}</div>
             <div className="list-title">{this.props.text}</div>
             <div className="list-title">
                <button className="finish" onClick={this.handelDone}>done</button>
                <button className="delete" onClick={()=>{this.handleDel()}}>delete</button>
             </div>
        </div>
      )
    }
  }
  class ListApp extends React.Component{
    constructor(props){
      super(props)
      console.log(props)
    }
    render(){
      let items=this.props.items
      console.log(items)
      return(
        <div>
          {
            items.map((item,i)=>{
              console.log(item,i)
              return(
                <ListItem 
                key={item.id}
                id={item.id}
                text={item.text}
                time={item.time}
                status={item.status}
                handelDone={this.props.handelDone}
                handleDelete={this.props.handleDelete}
                />
              )
            })
          }
        </div>
      )
    }
  }
  class TodoList extends React.Component{
    constructor(props){
      super(props)
      this.state={
        text:'',
        items:[{id: 1, status: 1, text: "去月球"},{id: 2, status: 0, text: "去火星"}]
      }
      this.add = this.add.bind(this)
      this.hanlChange = this.hanlChange.bind(this)
      this.handleDelete = this.handleDelete.bind(this)  
      this.handelDone = this.handelDone.bind(this)
      let data = JSON.parse(localStorage.getItem("data"))
      if(data==null){
        data=[]
      }
      if(data.length>0){
        this.state.items=data
      }else{
        this.state.items=[]
      }
    }
    //添加事件
    add(e) {
      let obj={}
      obj.time=new Date().toLocaleString()
      obj.status=0
      obj.text = this.state.text
      let data = this.state.items
      if(data==null){
        data=[]
      }
      data.push(obj)
      data.map((item,i)=>{
        item.id = i
      })
      this.setState({
        items:data
      })
      data=JSON.stringify(data)
      console.log(data)
      localStorage.setItem("data",data)
      this.setState({
        text:''
      })
    }
    //输入框改变事件
    hanlChange(e){
      this.setState({
        text:e.target.value
      })
    }
    // enter事件
    onKeyDownchange(e){
      if(e.keyCode == 13) {
        this.add()
      }
    }
    //完成
    handelDone(taskid){
      let items = this.state.items;
      items = items.filter(item => {
        if(item.id == taskid){
          item.status=1
        }
        return item
      });
      this.setState({
        items:items
      })
      let data = JSON.stringify(items)
      localStorage.setItem("data",data)
    }
    //删除
    handleDelete(taskid) {
        let items = this.state.items;
        items = items.filter(item => item.id !== taskid);
        this.setState({
            items: items
        });
        this.setState({
          items:items
        })
        let data = JSON.stringify(items)
        localStorage.setItem("data",data)
    }
    render(){
      return(
        <div>
          <div className="title">
            <h1>TodoList</h1>
          </div>
          <div className="search">
            <input type="text" value={this.state.text} onChange={this.hanlChange} onKeyDown={e=> this.onKeyDownchange(e)}/> 
            <button onClick={this.add}>添加</button>
          </div>
          <div className="list list-header">
            <div className="list-title">时间</div>
            <div className="list-title">事件</div>
            <div className="list-title">操作</div>
          </div>
          <ListApp items={this.state.items} handleDelete={this.handleDelete} handelDone={this.handelDone}/>
        </div>
      )
    }
  }
  ReactDOM.render(
  <TodoList />,
  document.getElementById('root')
);
  </script>
</body>

</html>
posted on 2021-03-09 17:21 凉城a 阅读(88) 评论(0) 收藏举报