React를 사용하여 Todolist를 구현하는 방법
- 藏色散人원래의
- 2022-12-29 11:26:052732검색
react를 사용하여 todolist를 구현하는 방법: 1. 새 프로젝트 폴더 코드를 만듭니다. 2. "create-react-app todo-list" 명령을 통해 반응 프로젝트를 만듭니다. 3. 아래에 새 ToDoList.jsx 파일을 만듭니다. 4. 배열을 사용하여 데이터를 저장합니다. 배열의 각 요소는 개체입니다. 5. 페이지 레이아웃을 작성합니다. 6. 키보드 이벤트를 추가하고, 입력 변경 사항을 모니터링하고, 할 일 항목과 완료된 항목을 구현합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
반응을 사용하여 할일 목록을 구현하는 방법은 무엇입니까?
React 시작의 실제 예 - ToDoList 구현
요약:
저는 최근 짧은 기간 동안 React를 공부했고 일부 React 개발의 기본 사항을 조금 이해했습니다. 오늘은 이 컴포넌트를 만드는 과정을 영상으로 담아서 같은 프론트엔드 초보자들에게 참고가 되도록 하겠습니다.
1. 디스플레이 예시 및 기능 소개
1.1 디스플레이 예시
동영상 1.1
1.2 기능 소개
- 할 일 항목 추가, Enter 키를 눌러 확인, 입력 지우기
- 통과 확인란을 선택하면 할 일과 완료 항목을 전환할 수 있습니다.
- 항목을 삭제하려면 삭제를 클릭하세요
2. 준비
2.1 환경 구성 알림
준비 전: 이 글 다음을 포함하여 개발 환경이 구성되었다고 가정합니다.
cnpm이 설치되었습니다.- 스캐폴딩 도구가 설치되었습니다. npm install -g create-react-app / cnpm install -g create-react-app
- 참고: 스캐폴딩을 처음 구성할 때 스크립트 실행을 금지하는 오류가 발생합니다. . 해결 방법을 보려면 다음을 클릭하세요.
- https://www.php.cn/link/e543789a8d5b6a0e6b2f2a804d207e8d
그림 2.2
3. 터미널에 다음 명령을 입력하여 새 React 프로젝트를 만듭니다. create-react-app todo-list
그림 2.3
4. 다음과 같이 React 프로젝트를 생성합니다.
그림 2.4
React 개발에는 주로 src
생성한 구성 요소를 배치하려면 src 디렉터리에 새 구성 요소 폴더를 만듭니다.
CSS 파일 및 이미지 파일과 같은 정적 리소스를 방지하려면 src 디렉터리에 새 자산 파일을 만듭니다. 그림 2.5에 표시된대로 : 
그림 2.5 3. 구현 프로세스
3.1 구성 요소 생성 Todolist
- components 폴더 아래에서 새 todolist.jsx
- 파일 생성 다음 코드를 작성하십시오. 컴포넌트의 기본 프레임워크는 다음과 같습니다.
//导入React相关依赖
import React from 'react';
//创建一个组件
class ToDoList extends React.Component{
//构造函数
constructor(props){
super(props);
//this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
this.state = {
//this.state里可以写一些初始化的数据
}
}
//render渲染虚拟DOM
render(){
return(
<div>
ToDoList
</div>
);
}
}
//输出组件,使得该组件可以被其他组件调用
export default ToDoList; 컴포넌트의 각 부분의 기능은 주석에 간략하게 설명되어 있습니다. 기본 구성 요소에는 일반적으로 위의 부분이 포함됩니다.
- import导入的依赖;
- 组件（class XXX extends React,Component）;
- 构造函数constructor;
- render函数；
- export输出组件；
3.2 功能实现与解析
1.初始化数据
使用一个数组来保存数据，数组中每个元素为一个对象，该对象包括两个字段:title和checked,tile为字符串类型，checked为布尔类型，用来区分待办（false）和已办（true）;
list:[
{
title:'吃饭',
checked:true
},
{
title:'跑步',
checked:false
},
{
title:'上班',
checked:false
},
{
title:'睡觉',
checked:true
},
]该数组在this.state中初始化：
constructor(props){
super(props);
//this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
this.state = {
//this.state里可以写一些初始化的数据
list:[
{
title:'吃饭',
checked:true
},
{
title:'跑步',
checked:false
},
{
title:'上班',
checked:false
},
{
title:'睡觉',
checked:true
},
],
}
}2.编写页面布局
页面分为顶部的输入框（input）和下面的 待办事项列表 和已办事项列表；在render中的return中编写（jsx）;
render(){
return(
<div>
<header>TodoList: <input> </header>
<h2>待办事项</h2>
<hr>
<ul>
{/* 多个li，后面会循环输出 */}
<li>
<input> -- <button>删除</button>
</li>
</ul>
<h2>已完成事项</h2>
<hr>
<ul>
{/* 多个li，后面会循环输出 */}
<li>
<input> -- <button>删除</button>
</li>
</ul>
</div>
);
}3.挂载到根节点下
在index.js下，引入ToDoList组件
import ToDoList from './components/ToDoList';
然后挂在组件ToDoList
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import ToDoList from './components/ToDoList';
ReactDOM.render(
<react.strictmode>
{/* 此处是ToDoList组件 */}
<todolist></todolist>
</react.strictmode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();简陋渲染效果如下：
图3.1
3.功能实现
添加待办事项
（1）使用ref属性，获取input输入值：
在input标签上设置属性ref="inputToDo",然后在方法中可以通过 this.refs.inputToDo.value获取输入值；
（2）添加键盘事件，监听输入变化，当输入enter时，添加待办事项；
使用onKeyUp(键盘弹起)/onKeyDown(键盘按下)事件来监听键盘变化。当键盘变化后，触发添加函数，将输入值添加到待办事项中；代码如下：
jsx:
<header>TodoList: <input> </header>
addToDo函数：
addToDo = (event) => {
console.log(event.keyCode);
if(event.keyCode === 13)
{
let tempList = this.state.list;
tempList.push({
title:this.refs.inputToDo.value,
checked:false,
});
this.setState({
list:tempList,
});
this.refs.inputToDo.value = '';
}
}（3）在constructor中使用bind绑定addToDo,这一步是必须的，否则方法不能执行，所有的方法都需要像这样绑定；
this.addToDo = this.addToDo.bind(this);
图3.2
效果：
视频3.1
输出待办事项和已办事项
使用map方法，循环遍历数组，输出每组数据；代码如下：
-
{/* 多个li，后面会循环输出 */}
{
this.state.list.map((value,index)=>{
{/*checked为false表示待办*/}
if(!value.checked)
{
return (
- {/* */} <input> {value.title}-- <button>删除</button> ); } }) }
checked = {value.checked}表示复选框是否打勾，onChange事件触发一个改变事项状态的方法，index是数组的索引，该方法在下文实现；
效果：
图3.3
待办和已办互相转换
这一步的思路也很简单，其实就是在触发checkbox的onChange事件时，将某一个事项的checked值变为相反的值（true->false/false->true）,所以onChange后的方法需要传入数组的索引值，具体实现代码如下：
jsx
<input> {value.title}-- <button>删除</button>checkboxChange
checkboxChange = (index) => {
let tempList = this.state.list;
tempList[index].checked = !tempList[index].checked;
this.setState({
list:tempList,
});
}效果：
视频3.2
删除事项
删除事项比较简单了，思路也是类似的，在button上添加onClick按钮，触发删除事件，传入参数index,然后根据index，使用数组的splice函数，删除某一待办事项。
arrayA.splice(index,n)
该方法第一个参数是数组中的元素位置，第二个参数是从index开始删除多少个元素。
具体实现如下：
jsx
removeToDo
removeToDo = (index) => {
let tempList = this.state.list;
tempList.splice(index,1);
this.setState({
list:tempList,
});
}效果：即为开篇展示的效果
3.3 编写样式
样式随便写了一下，不太好看，这里也把代码丢上来吧；
index.css
.list{
padding: 10px;
}
.list li{
line-height: 40px;
margin-left: 30px;
}
.title{
height: 44px;
line-height: 44px;
text-align: center;
background: #000;
color:#fff;
}
.title input{
height: 40px;
}
.container{
width: 800px;
height: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #D0D0D0;
border: #fff solid 1px;
border-radius: 5px;
}
.container h2{
margin-left: 20px;
}
.del-btn {
float: right;
margin-right: 30px;
}引入样式
在ToDoList.jsx中按如下代码引入index.css
import '../assets/index.css';
3.4 整体效果
视频3.3：整体效果展示
四、整体代码
- ToDoList.jsx
//导入React相关依赖
import React from 'react';
import '../assets/index.css';
//创建一个组件
class ToDoList extends React.Component{
//构造函数
constructor(props){
super(props);
//this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
this.state = {
//this.state里可以写一些初始化的数据
list:[
{
title:'吃饭',
checked:true
},
{
title:'跑步',
checked:false
},
{
title:'上班',
checked:false
},
{
title:'睡觉',
checked:true
},
],
}
this.addToDo = this.addToDo.bind(this);
this.checkboxChange = this.checkboxChange.bind(this);
}
addToDo = (event) => {
console.log(event.keyCode);
if(event.keyCode === 13)
{
let tempList = this.state.list;
tempList.push({
title:this.refs.inputToDo.value,
checked:false,
});
this.setState({
list:tempList,
});
this.refs.inputToDo.value = '';
}
}
checkboxChange = (index) => {
let tempList = this.state.list;
tempList[index].checked = !tempList[index].checked;
this.setState({
list:tempList,
});
}
removeToDo = (index) => {
let tempList = this.state.list;
tempList.splice(index,1);
this.setState({
list:tempList,
});
}
//render渲染虚拟DOM
render(){
return(
<header>TodoList: <input> </header>
待办事项
{/* 多个li，后面会循环输出 */}
{
this.state.list.map((value,index)=>{
if(!value.checked)
{
return (
-
{value.title}
);
}
})
}
已完成事项
{/* 多个li，后面会循环输出 */}
{
this.state.list.map((value,index)=>{
if(value.checked)
{
return (
-
{value.title}
);
}
})
}
);
}
}
//输出组件,使得该组件可以被其他组件调用
export default ToDoList;index.css
.red{
color:red;
}
.list{
padding: 10px;
}
.list li{
line-height: 40px;
margin-left: 30px;
}
.title{
height: 44px;
line-height: 44px;
text-align: center;
background: #000;
color:#fff;
}
.title input{
height: 40px;
}
.container{
width: 800px;
height: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #D0D0D0;
border: #fff solid 1px;
border-radius: 5px;
}
.container h2{
margin-left: 20px;
}
.del-btn {
float: right;
margin-right: 30px;
}index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import ToDoList from './components/ToDoList';
ReactDOM.render(
<react.strictmode>
{/* <app></app> */}
<todolist></todolist>
</react.strictmode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();五、结语
结语就算了吧，好困，睡了。
写博客费时间啊，大家要是看到有啥不对的地方，麻烦联系我修改哈，我水平太有限了，谢谢大佬们了。
推荐学习：《react视频教程》
위 내용은 React를 사용하여 Todolist를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!