react-todolist

 （todolist页面图） 

import { React,Component } from "react";
import './todoList.css';
import { Input ,Checkbox ,Button} from 'antd';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listvalue:[
        { id: 1,name:'lalala',code: false},
        { id: 2,name:'asdfsfsdf',code: false},
        { id: 3,name:'gdfhfgbc',code: true},
        { id: 4,name:'asdfrtertdf',code: false}
      ],
      total:3,
      checktoyal:1,
      checkedAll:false
    };
  }
  
  valuechange = (event)=>{
    if(event.keyCode === 13){
      this.setState(
        {
          listvalue :[...this.state.listvalue,
            {id:Math.random()*100,name:event.target.value,code: false}
          ]
        }
      )
      this.setState({total :this.state.listvalue.length+1})
      this.setState({checkedAll :false})
    }
  };

  onChangeAll = ()=>{
    let newcode = !this.state.checkedAll
    let listvalue = this.state.listvalue
    this.setState({checkedAll :newcode})
    listvalue.forEach((item)=>{
      item.code = newcode
    })
    !newcode?this.setState({checktoyal :0}):this.setState({checktoyal :listvalue.length})
  };

  onChangeCode = (id)=>{
    let listvalue = this.state.listvalue
    let newlist = listvalue.map((item)=>{
      if(item.id === id){
        item.code = !item.code
      }
      return item
    })
    this.setState({listvalue :newlist})
    let codenew = listvalue.every((item)=>{
      return item.code === true
    })
    this.setState({checkedAll :codenew})
    let num = listvalue.reduce((prev,item)=>{
      if(item.code === true){
        prev++
      }
      return prev
    },0)
    this.setState({checktoyal :num})
  };

  onChangeDelete = (id)=>{
    let listvalue = this.state.listvalue
    let listnew = listvalue.filter((item)=>{
      return item.id !== id
    })
    this.setState({listvalue :listnew})
    this.setState({total :listvalue.length-1})
    let num = listvalue.reduce((prev,item)=>{
      if(item.code === true){
        prev++
      }
      return prev
    },0)
    if(num === this.state.checktoyal){
      this.setState({checkedAll:true})
    }
  }

  render() {
    const { listvalue ,total ,checktoyal ,checkedAll } = this.state;

    return (
      <div className="main">
        <div className="main-input">
          <Input placeholder="请输入" onKeyUp={this.valuechange} allowClear/>
        </div>
        {listvalue.map((item)=>{
          return (
          <div className="list-item" key={item.id}>
            <Checkbox checked={item.code} onChange={()=>{this.onChangeCode(item.id)}}>
              {item.name}
            </Checkbox>
            <Button type="primary" danger onClick={()=>{this.onChangeDelete(item.id)}}>删除</Button>
          </div>
          )
        })}
        <div className="main-bottom">
          <Checkbox onChange={this.onChangeAll} checked={checkedAll}>全选</Checkbox>
          已选：{checktoyal}全部：{total}
        </div>
      </div>
    );
  }
}

export default TodoList;

.main{
  width: 500px;
  border: 1px solid #ebebeb;
  min-height: 300px;
  padding: 20px;
  margin-top: 20px;
  margin-left: 35%;
}

.main-input{
  display: flex;
}

.main-bottom{
  display: flex;
  padding-left: 5px;
  margin-top: 5px;
}

.list-item{
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding: 5px;
  margin-top: 5px;
  border: 1px solid #ebebeb;
  line-height: 28px;
}

这个案例是由

npx create-react-app my-app
cd my-app
npm start

命令构建的，使用了Ant-Design UI库（安装命令：npm install antd --save）记得要引入它的样式（import 'antd/dist/antd.css';）在App.js或者index.js都可以（但是我引入之后有警告并不知道为什么，不过不影响使用）。

解释一下使用的方法：

Math.random()    生成随机小数

Array.forEach()    用于调用数组的每个元素，并将元素传递给回调函数。适用于只是进行集合或数组遍历。

a?1:2                    三元表达式，如果a为真返回1如果a为假返回2

Array.map()          返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。不会对空数组进行检测。不会改变原始数组。

Array.every()        判断数组中每一项是否符合规则，如果该函数所有一项返回true,则返回true。一旦有一项不满足则返回flase。

Array.reduce()      接收一个函数作为累加器，对数组中的每个符合条件的值进行计算，最终计算为一个值。

Array.filter()          创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。类似于过滤器。

写代码过程中遇到的报错：

Unterminated JSX contents.

错误：

<div>123<div/>

正确：

<div>123</div>

Received true for a non-boolean attribute cl.

接受到了非布尔属性

Parsing error: Legacy octal literals are not allowed in strict mode.

JS严格模式禁止八进制的字面量

错误：

listvalue:[ { id: 001,name:'lalala',code: false}, { id: 002,name:'asdfsfsdf',code: false}, { id: 003,name:'gdfhfgbc',code: true} ]};

正确：

listvalue:[ { id: 1,name:'lalala',code: false}, { id: 2,name:'asdfsfsdf',code: false}, { id: 3,name:'gdfhfgbc',code: true} ]};

Array.prototype.map() expects a return value from arrow

map需要返回值即要有return

（本人是也是新手，写的一定存在不好的地方，欢迎指正改进）