React----简易待办事项

最新推荐文章于 2020-11-09 17:35:59 发布

fengGer的bugs

最新推荐文章于 2020-11-09 17:35:59 发布

阅读量513

点赞数

分类专栏： React 文章标签： React小案例

本文链接：https://blog.csdn.net/qq_41224512/article/details/88967709

版权

React 专栏收录该内容

4 篇文章 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>待办事项</title>
   <!--  引入外部文件-->
  <script src="./lib/react.development.js"></script>
  <script src="./lib/react-dom.development.js"></script>
  <script src="./lib/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
<script type="text/babel">
  const { Component } = React

  class TodoList extends Component{
    constructor(props){
      super(props)
      this.state = {
        list: [],
        todoListStyle:{
          color:'deeppink',
          fontSize:'2rem'
        },
        todoListStyle2:{
          color:'orange',
          fontSize:'1.5rem'
        }
      }
    }

    KeyUpHandle(e){
      // console.log(e.target,e.currentTarget)
      const b = this.state.list
      if(e.keyCode == 13 && e.currentTarget.value){
        b.push({
          status:0,
          content: e.currentTarget.value
        })
        this.setState({
          list: b  //[...this.state.list,e.currentTarget.value]
        })
        e.currentTarget.value = ''
      }
    }
    endHandle(index){
      const d =this.state.list
      d[index].status = 1
      this.setState({
        list:d
      })
    }
    delHandle(index){
      const d =this.state.list
      d.splice(index,1)
      this.setState({
        list:d
      })
    }

    render(){
      const { list,todoListStyle,todoListStyle2 } = this.state
      return(<div className='todo-list'>
        <h4>待办事项</h4>
        <input onKeyUp={this.KeyUpHandle.bind(this)} placeholder='请输入待办事项' />
        <br />
        <ul>
          {list.map((item,index) => {
            return (<li style={item.status == 0 ? todoListStyle : todoListStyle2} key={index}>
              <span>{item.content}</span>
              <button onClick={() =>{ this.endHandle(index) }}>完成</button>
              <button onClick={() =>{ this.delHandle(index) }}>删除</button>
            </li>)
          })}
        </ul>
      </div>)
    }
  }


  const App = (props) => {
    return (<div className='container'>
      <TodoList />
    </div>)
  }

  ReactDOM.render(<App />,document.getElementById('app'))
</script>
</html>

效果显示如下：
在这里插入图片描述