<title>待办事项</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
function Todos() {
const [todos, setTodos] = useState([]);
const keyUpHandle = (e) => {
if (e.keyCode === 13 && e.target.value) {
setTodos([
{ id: Date.now(), content: e.target.value, isEnd: false },
...todos,
]);
}
};
// 不能直接在button上添加点击效果,会不起作用的,得重新setTodos()
return (
<div className="todos">
<h5>代办事项</h5>
<input
placeholder="请输入代办内容"
onKeyUp={(e) => {
keyUpHandle(e);
}}
/>
<ul>
{todos.map((item) => (
<li key={item.id}>
{item.content}
{item.isEnd ? (
"已完成"
) : (
<button
onClick={() => {
setTodos(
// map循环原数组,生成一个新的数组
todos.map((b) => {
// const tmp = { ...b }; // 浅拷贝
if (b.id === item.id) {
// tmp.isEnd = true; // 方法一
i.isEnd = true; // 方法二
}
// return tmp;
return i;
})
);
}}
>
完成
</button>
)}
</li>
))}
</ul>
</div>
);
}
function App() {
return <Todos />;
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
react-----待办事项demo(map循环套循环-点击完成)
最新推荐文章于 2022-07-22 15:33:26 发布