react-todoList

七秒~

已于 2022-07-12 10:03:16 修改

阅读量374

点赞数 1

分类专栏： react初级文章标签： react.js javascript 前端

于 2022-07-07 15:45:11 首次发布

本文链接：https://blog.csdn.net/yingchengzzz/article/details/125660696

版权

react初级专栏收录该内容

3 篇文章 0 订阅

订阅专栏

React - todoList 练习(还没写完)

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

TODOList

拆分组件_按照功能点

Header；
List；
Item；
footer；

先拆Html再拆分CSS文件

Header；
List；
Item；
footer；

拆分时, 注意替换js和JSXde的不同

注意 :

拆分的组件的组件名, 需要大写; 如,Header
…省略；

不同 :

class 变成 className；
style改成{{}}；
style里的属性值, 记得加引号；
(不然会被编译成变量去全速搜索, 导致报错)
…省略；

后端接口返参的数据,应该存在哪个页面?

分析

APP( 数据共用, 此时数据适合放在最外侧; )
- Header
- List
  - Item
- Footer

数据驱动着页面的展示,;
数据子组件之间通用, 如果放到子组件, 后期更改后,传到别的子组件会很麻烦;
此时,数据适合放在最外侧;

组件

Header 部分

预计实现

可以获取到输入框的值;
敲回车时, 可以获取到输入框输入的值;
把值传递到父组件, 页面实时刷新;
…省略；

header细节;

遇到的bug;

优化后的代码;

注意点;

List部分

预计实现

可以获取到输入框的值;
敲回车时, 可以获取到输入框输入的值;
把值传递到父组件, 页面实时刷新;
…省略；

List细节;

遇到的bug;

优化后的代码;

注意点;

Item部分

预计实现

可以获取到输入框的值;
敲回车时, 可以获取到输入框输入的值;
把值传递到父组件, 页面实时刷新;
…省略；

Item细节;

遇到的bug;

优化后的代码;

注意点;

footer部分

预计实现

可以获取到输入框的值;
敲回车时, 可以获取到输入框输入的值;
把值传递到父组件, 页面实时刷新;
…省略；

footer细节;

遇到的bug;

优化后的代码;

注意点;

总结

静态文件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>React todoList</title>

		<style>
			/*base*/
			body {
				background: #fff;
			}

			.btn {
				display: inline-block;
				padding: 4px 12px;
				margin-bottom: 0;
				font-size: 14px;
				line-height: 20px;
				text-align: center;
				vertical-align: middle;
				cursor: pointer;
				box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
				border-radius: 4px;
			}

			.btn-danger {
				color: #fff;
				background-color: #da4f49;
				border: 1px solid #bd362f;
			}

			.btn-danger:hover {
				color: #fff;
				background-color: #bd362f;
			}

			.btn:focus {
				outline: none;
			}

			.todo-container {
				width: 600px;
				margin: 0 auto;
			}
			.todo-container .todo-wrap {
				padding: 10px;
				border: 1px solid #ddd;
				border-radius: 5px;
			}

			/*header*/
			.todo-header input {
				width: 560px;
				height: 28px;
				font-size: 14px;
				border: 1px solid #ccc;
				border-radius: 4px;
				padding: 4px 7px;
			}

			.todo-header input:focus {
				outline: none;
				border-color: rgba(82, 168, 236, 0.8);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
			}

			/*main*/
			.todo-main {
				margin-left: 0px;
				border: 1px solid #ddd;
				border-radius: 2px;
				padding: 0px;
			}

			.todo-empty {
				height: 40px;
				line-height: 40px;
				border: 1px solid #ddd;
				border-radius: 2px;
				padding-left: 5px;
				margin-top: 10px;
			}
			/*item*/
			li {
				list-style: none;
				height: 36px;
				line-height: 36px;
				padding: 0 5px;
				border-bottom: 1px solid #ddd;
			}

			li label {
				float: left;
				cursor: pointer;
			}

			li label li input {
				vertical-align: middle;
				margin-right: 6px;
				position: relative;
				top: -1px;
			}

			li button {
				float: right;
				display: none;
				margin-top: 3px;
			}

			li:before {
				content: initial;
			}

			li:last-child {
				border-bottom: none;
			}

			/*footer*/
			.todo-footer {
				height: 40px;
				line-height: 40px;
				padding-left: 6px;
				margin-top: 5px;
			}

			.todo-footer label {
				display: inline-block;
				margin-right: 20px;
				cursor: pointer;
			}

			.todo-footer label input {
				position: relative;
				top: -1px;
				vertical-align: middle;
				margin-right: 5px;
			}

			.todo-footer button {
				float: right;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div class="todo-container">
				<div class="todo-wrap">
					<div class="todo-header">
						<input type="text" placeholder="请输入你的任务名称，按回车键确认" />
					</div>
					<ul class="todo-main">
						<li>
							<label>
								<input type="checkbox" />
								<span>xxxxx</span>
							</label>
							<button class="btn btn-danger" style="display: none">删除</button>
						</li>
						<li>
							<label>
								<input type="checkbox" />
								<span>yyyy</span>
							</label>
							<button class="btn btn-danger" style="display: none">删除</button>
						</li>
					</ul>
					<div class="todo-footer">
						<label>
							<input type="checkbox" />
						</label>
						<span> <span>已完成0</span> / 全部2 </span>
						<button class="btn btn-danger">清除已完成任务</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>