66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import "./TodoList.css";
|
|
import { useState } from "./lib/react/ReactHooks";
|
|
|
|
function TodoList() {
|
|
// 用于绑定输入框的状态，让输入框成为一个受控组件
|
|
const [item, setItem] = useState("");
|
|
// 待办事项的初始化列表
|
|
const [list, setList] = useState(["吃饭", "学习"]);
|
|
|
|
// 添加按钮的点击事件
|
|
function addBtnHandle() {
|
|
// 1. 获取输入框的值
|
|
// 2. 将输入框的值添加到列表中
|
|
// 3. 清空输入框的值
|
|
setList([...list, item]);
|
|
setItem("");
|
|
}
|
|
|
|
// 删除某一条待办事项
|
|
function deleteItem(index) {
|
|
// 1. 获取待删除的索引
|
|
// 2. 根据索引删除对应的元素
|
|
// 3. 重新渲染列表
|
|
const newList = [...list];
|
|
newList.splice(index, 1);
|
|
setList(newList);
|
|
}
|
|
|
|
return (
|
|
<div className="container">
|
|
<h1>待办事项</h1>
|
|
|
|
<div>
|
|
<input
|
|
type="text"
|
|
value={item}
|
|
onChange={(e) => {
|
|
setItem(e.target.value);
|
|
}}
|
|
placeholder="请输入待办事项"
|
|
className="input"
|
|
/>
|
|
<button className="addBtn" onClick={addBtnHandle}>
|
|
添加
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
{list.map((item, index) => {
|
|
return (
|
|
<div
|
|
className="item"
|
|
key={index}
|
|
onClick={(e) => deleteItem(index, e)}
|
|
>
|
|
{item}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TodoList;
|