todoList 的 效果图如下：
image.png
1.整体框架todoList
class TodoList extends React.Component {
constructor(props) {
super(props)
this.state = {
//checked是用来判断是否已完成的
todoList: [
{ do: '8:00起床', checked: false },
{ do: '9:00吃饭', checked: false },
{ do: '10:00上班', checked: false },
{ do: '11:00睡觉', checked: false },
{ do: '8:00起床', checked: false },
{ do: '9:00吃饭', checked: false },
{ do: '10:00上班', checked: false },
{ do: '11:00睡觉', checked: false },
]
}
}
render() {
return (
<div className="todo-list">
<p>todoList</p>
<ul>
{this.TodoItem().length ? (
this.TodoItem()
) : (
<span className="no-data">暂无待办事项~</span>
)}
</ul>
{this.Total()}
{this.AddTodo()}
</div>
)
}
}
2.todoItem组件
TodoItem() {
return (
{/*通过遍历来渲染列表*/}
this.state.todoList.map((item, index) =>
<li key={index} >
<div>
{/* <input
type="checkbox"
data-index={index}
onChange={(e) => this.closeTodo(e)}
checked={item.checked}
/> */}
{/* <input
className={item.checked ? 'del-todo' : ''}
value={item.do}
readonly={item.checked}
onFocus={(e) => this.isFocus(e)}
/> */}
<span
data-index={index}
onClick={(e) => this.closeTodo(e)}
className={item.checked ? 'del-todo' : ''}
>
{item.do}
</span>
</div>
<div className="btn-list">
{/* 后来发现这个没什么用 */}
{/* <button
className="modify"
onClick={(e) => this.modify(e)}
disabled={item.checked}
>
修改
</button> */}
<button
className="delete"
onClick={(e) => this.delete(e)}
data-index={index}
disabled={item.checked}
>
删除
</button>
</div>
</li >
)
)
}
之所以用了函数而不是类的理由如下：
类和函数的区别是：使用类就允许我们使用其他特性，例如局部状态、生命周期钩子。由于我需要使用到state来控制全局状态，类与类之间不能直接调用对方的state，所以此处用作函数。
关于事件绑定的说明：
官网是这样讲的：方法默认是不会[绑定] this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。有三种解决方法：
1.在类里面加上this.handleClick = this.handleClick.bind(this); html为<button onClick={this.handleClick}>
2.事件写为箭头函数handleClick = () => { console.log('this is:', this); } ；html如上
3.<button onClick={(e) => this.handleClick(e)}>
官网的说法是后两种方法会在每次组件渲染时创建一个新的函数，可能会影响性能。建议使用第一种
3.已完成组件
Total() {
let finished = 0;
const { todoList } = this.state
todoList.forEach(function (item) {
if (item.checked) {
finished++;
}
});
return (
<div>
已完成{finished}件/总共{todoList.length}件
</div>
)
}
4.添加待办事项组件
AddTodo() {
return (
<div className="add-btn">
<input
className="add"
ref={input => this.input = input}
placeholder="添加待办事项..."
/>
<button
onClick={(e) => this.addTodo(e)}
>
提交
</button>
</div>
)
}
5.当中所涉及的所有事件
1.选中事件
// 选中
closeTodo(e) {
const { index } = e.currentTarget.dataset;
// 错误做法: react的原则是 不要直接修改state 如果要修改的话 就用setState 而且传入的还要不是一个 原数组
// this.state.todoList[index].checked = true
const todoList = this.state.todoList.slice()
todoList[index].checked = true
this.setState({
todoList
})
}
- 删除待办事项
delete(e) {
const { index } = e.currentTarget.dataset;
const todoList = this.state.todoList.slice()
todoList.splice(index, 1)
this.setState({
todoList
})
}
3.添加待办事项
addTodo() {
//拿到待办项的value值
const inpVal = this.input.value;
// 如果值为空则点击无效
if (inpVal) {
const { todoList } = this.state;
this.setState({
todoList:
todoList.concat({
do: inpVal,
checked: false
})
})
}
}
6.所有css样式
ul {
width: 350px;
border: 1px solid #ddd;
padding-left: 0;
}
.todo-list {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
}
ul li {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 10px;
border-bottom: 1px solid #ddd;
}
ul li span {
cursor: pointer;
}
ul li:last-child {
border-bottom: none;
}
button {
border: none;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
}
.modify {
background: #409eff;
margin-right: 6px;
}
.delete {
background: #f56c6c;
}
.add-btn {
display: flex;
align-items: center;
margin-top: 50px;
}
.add-btn button {
background: #409eff;
padding: 10px 20px;
}
/* 拿elementUI的input框样式 */
.add {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
margin-right: 20px;
}
.no-data {
padding-left: 10px;
line-height: 3;
text-align: center;
font-size: 14px;
color: #aaa;
}
.del-todo {
color: #ccc;
text-decoration: line-through;
cursor: not-allowed;
}
