>  기사  >  웹 프론트엔드  >  React를 사용하여 Todolist를 구현하는 방법

React를 사용하여 Todolist를 구현하는 방법

藏色散人
藏色散人원래의
2022-12-29 11:26:052697검색

react를 사용하여 todolist를 구현하는 방법: 1. 새 프로젝트 폴더 코드를 만듭니다. 2. "create-react-app todo-list" 명령을 통해 반응 프로젝트를 만듭니다. 3. 아래에 새 ToDoList.jsx 파일을 만듭니다. 4. 배열을 사용하여 데이터를 저장합니다. 배열의 각 요소는 개체입니다. 5. 페이지 레이아웃을 작성합니다. 6. 키보드 이벤트를 추가하고, 입력 변경 사항을 모니터링하고, 할 일 항목과 완료된 항목을 구현합니다.

React를 사용하여 Todolist를 구현하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응을 사용하여 할일 목록을 구현하는 방법은 무엇입니까?

React 시작의 실제 예 - ToDoList 구현

요약:

저는 최근 짧은 기간 동안 React를 공부했고 일부 React 개발의 기본 사항을 조금 이해했습니다. 오늘은 이 컴포넌트를 만드는 과정을 영상으로 담아서 같은 프론트엔드 초보자들에게 참고가 되도록 하겠습니다.

1. 디스플레이 예시 및 기능 소개

1.1 디스플레이 예시

React를 사용하여 Todolist를 구현하는 방법

동영상 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 새 프로젝트 폴더 만들기

1.

그림 2.2

3. 터미널에 다음 명령을 입력하여 새 React 프로젝트를 만듭니다. create-react-app todo-list

그림 2.3

4. 다음과 같이 React 프로젝트를 생성합니다.

그림 2.4React 개발에는 주로 src

의 파일 조작이 포함됩니다. 장소 일부 공개 파일, package.json 이는 일부 구성 파일이므로 여기서는 자세히 설명하지 않습니다.

2.3 파일 분류

생성한 구성 요소를 배치하려면 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

效果:

 React를 사용하여 Todolist를 구현하는 방법

视频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

  • 待办和已办互相转换

  这一步的思路也很简单,其实就是在触发checkboxonChange事件时,将某一个事项的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,
     });
}

 效果:

React를 사용하여 Todolist를 구현하는 방법

 视频3.2

  • 删除事项

 删除事项比较简单了,思路也是类似的,在button上添加onClick按钮,触发删除事件,传入参数index,然后根据index,使用数组的splice函数,删除某一待办事项。

arrayA.splice(index,n)

该方法第一个参数是数组中的元素位置,第二个参数是从index开始删除多少个元素。

具体实现如下:

jsx

  
  •         {value.title}        --   
  •  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 整体效果

     React를 사용하여 Todolist를 구현하는 방법

    视频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;
    View Code
    • 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.