实现一个完整版的todolist

1.App.js

import './App.css'
import './app copy.js'
import React from 'react'

class Content extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tabs: [
        { title: '全部', type: 'all', id: 0 },
        { title: '未完成', type: 'unfin', id: 1 },
        { title: '完成', type: 'fin', id: 2 },
      ],
      inputvalue: '',
      list: [],
      showlist: [],
      active: 'all',
    }
  }

  render() {
    return (
      <div className="cont">
        <div className="cont-top">
          <div className="cont-top-flex">
            <input
              type="text"
              className="el-inp"
              value={this.state.inputvalue}
              onChange={this.InputChange}
            />
            <span className="increase" onClick={this.addItem}>
              添加
            </span>
          </div>
        </div>
        <div className="cont-bottom">
          <div className="cont-tabs-list">
            {this.state.tabs.map((item) => {
              return (
                <div
                  key={item.id}
                  onClick={this.Tabs.bind(this, item.type)}
                  className={
                    this.state.active === item.type ? 'tabss active' : 'tabss'
                  }>
                  {item.title}
                </div>
              )
            })}
          </div>
          <div className="cont-list">
            {this.state.active === 'all' &&
              this.state.list.map((item, index) => (
                <div key={index} className="conter">
                  <p
                    onClick={this.Text.bind(this, item.id)}
                    className={item.finde ? 'text' : ''}>
                    {item.value}
                  </p>
                  <button
                    className="del"
                    key={index}
                    onClick={this.deleteItem.bind(this, item.id)}>
                    删除
                  </button>
                </div>
              ))}
            {this.state.active === 'unfin' &&
              this.state.list
                .filter((item) => !item.finde)
                .map((item, index) => (
                  <div key={index} className="conter">
                    <p
                      onClick={this.Text.bind(this, item.id)}
                      className={item.finde ? 'text' : ''}>
                      {item.value}
                    </p>
                    <button
                      className="del"
                      key={index}
                      onClick={this.deleteItem.bind(this, item.id)}>
                      删除
                    </button>
                  </div>
                ))}
            {this.state.active === 'fin' &&
              this.state.list
                .filter((item) => item.finde)
                .map((item, index) => (
                  <div key={index} className="conter">
                    <p
                      onClick={this.Text.bind(this, item.id)}
                      className={item.finde ? 'text' : ''}>
                      {item.value}
                    </p>
                    <button
                      className="del"
                      key={index}
                      onClick={this.deleteItem.bind(this, item.id)}>
                      删除
                    </button>
                  </div>
                ))}
          </div>
        </div>
      </div>
    )
  }

  InputChange = (e) => {
    this.setState({
      inputvalue: e.target.value,
    })
  }
  //添加数据
  addItem = () => {
    if (this.state.inputvalue === '') {
      return
    }
    this.setState({
      list: [
        ...this.state.list,
        {
          id: new Date().getTime(),
          value: this.state.inputvalue,
          finde: false,
        },
      ],
      inputvalue: '',
    })
  }
  //删除数据
  deleteItem(id) {
    console.log(id)
    this.setState({
      list: this.state.list.filter((item) => item.id != id),
    })
  }
  Text(id) {
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          item.finde = !item.finde
        }
        return item
      }),
    })
  }
  Tabs(type) {
    this.setState({
      active: type,
    })
  }
}

function App() {
  return (
    <div className="App">
      <div className="todo">
        <h3>ToDoList</h3>
        <Content />
      </div>
    </div>
  )
}

export default App

2.App.css

* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 0.16px;
}
.todo {
  width: 3.59rem;
  height: auto;
  font-size: 0.16rem;
  margin: 0.08rem auto 0;
}
.todo > h3 {
  width: 0.8202rem;
  height: 0.25rem;
  font-size: 0.1872rem;
  margin: 0.1872rem auto;
}
.cont {
  width: 3.22rem;
  /* height: 2rem; */
  height: auto;
  margin: auto;
  box-shadow: 0 0 0.1rem 0 #ccc;
}
.cont-top {
  width: 2.8rem;
  height: 0.41rem;
  padding: 0.18rem 0.2rem;
  border-bottom: 1px solid #ebeef5;
}
.cont-top-flex {
  width: 2.8rem;
  height: 0.4rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-inp {
  width: 2.05rem;
  height: 0.4rem;
  padding: 0 0.15rem;
  border-radius: 0.04rem;
  border: 1px solid #dcdfe6;
  color: #606266;
  font-size: 0.2rem;
  display: inline-block;
  line-height: 0.4rem;
}
.increase {
  width: 0.28rem;
  height: 0.16rem;
  font-size: 0.14rem;
  color: hsl(103, 81%, 69%);
}

.cont-bottom {
  width: 2.8rem;
  height: auto;
  padding: 0.2rem;
  font-size: 0.16rem;
}
.cont-tabs-list {
  width: 2.22rem;
  height: 0.4rem;
  border: 1px solid #ccc;
  margin: auto;
  display: flex;
  border-radius: 0.05rem;
  overflow: hidden;
}
.tabss {
  float: left;
  width: 0.74rem;
  text-align: center;
  line-height: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid #ccc;
}
.cont-list {
  width: 2.8rem;
  height: auto;
  padding: 0.1rem 0 0;
}
.cont-list span {
  width: 2.8rem;
  height: 0.4rem;
  display: block;
  text-align: center;
  margin: auto;
  line-height: 0.4rem;
}
.conter {
  width: 2.8rem;
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0 0 0;
  border-bottom: 1px solid #ccc;
}
.conter p {
  display: block;
  width: auto !important;
  padding: 0;
  margin: 0;
  height: 100%;
}
.del {
  width: 0.5rem;
  height: 0.3rem;
  background: hsl(103, 81%, 69%);
  border: none;
  line-height: 0.3rem;
  color: #fff;
  float: right;
}
.text {
  text-decoration: line-through;
}
.active {
  background: hsl(103, 81%, 69%);
  color: #fff;
}

3.app copy.js(用于适配)

(function (win) {
    var docEl = win.document.documentElement;
    var time;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 768) {
            width = 768;
        }
        var rem = width / 375 * 100;
        docEl.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function () {
        clearTimeout(time);
        time = setTimeout(refreshRem, 1);
    }, false)
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(time);
            time = setTimeout(refreshRem, 1);
        }
    }, false)

    refreshRem()

})(window)