(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
(本人是也是新手,写的一定存在不好的地方,欢迎指正改进)