Vite+React+TypeScript手擼TodoList的項目實踐

更新時間：2022年05月11日 14:43:12 作者：搬磚的喬布梭

本文主要介紹了Vite+React+TypeScript手擼TodoList的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

布局與樣式

一個TodoList長什么樣子相信無需多言：

上樣式： src/TodoList.css

.td-wrapper {
    width: 700px;
    margin: 0 auto;
}

.dp-wrapper {
    width: 100%;
    height: 40px;
    display: flex;
    margin-top: 10px;
}

.dp-wrapper input {
    flex: 4;
    height: 36px;
    line-height: 36px;
    text-indent: 10px;
    font-size: 1rem;
}

.dp-wrapper button {
    flex: 1;
    height: 100%;
    margin-left: 2px;
    font-size: 1rem;
}

.dl-wrapper {
    border: 1px solid gray;
    margin-top: 5px;
}

.dl-wrapper li {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid gray;
}

.dl-wrapper li.done {
    text-decoration: line-through;
}

.dl-wrapper li:last-child {
    border-bottom: none;
}

創(chuàng)建工程

npm init vite@latest

后續(xù)選擇：react + ts 添加必要文件，工程結(jié)構(gòu)如下：

定義全局數(shù)據(jù)類型

src/vite-env.d.ts

/// <reference types="vite/client" />

/* 代辦事項數(shù)據(jù)結(jié)構(gòu) */
interface TodoItem {
    name: string,
    done: boolean
}

/* 通用DOM事件處理器 */
type EventHandler = (e?: SyntheticEvent) => void

/* 處理函數(shù)定義：點擊提交按鈕 */
type UserInputHandler = (userInput: string, e?: SyntheticEvent) => void

/* 處理函數(shù)定義：點擊列表條目 */
type ImteClickHandler = (index: number, e?: SyntheticEvent) => void

/* 獲取指定Item的樣式名 */
type ItemClassNameGetter = (index: number) => string

/* 定義DataPicker組件的Props */
interface DataPickerProps {
    onUserInput: UserInputHandler
}

/* 定義DataLister組件的Props */
interface DataListerProps {
    list: TodoItem[],
    onItemClick: ImteClickHandler,
    getClassName: ItemClassNameGetter
}

實現(xiàn)步驟

在App.tsx中加載TodoList：

import { useState } from 'react'
import './App.css'
import TodoList from './TodoList'

function App() {
  return (
    <div className="App">
      <TodoList></TodoList>
    </div>
  )
}

export default App

父組件TodoList具體實現(xiàn)： src/TodoList.tsx

import React, { useState } from 'react'
import DataLister from './DataLister'
import DataPicker from './DataPicker'

/* 引入全局樣式 */
import "./TodoList.css"

export default function TodoList() {
    /* 定義全局代辦事項列表 */
    const [todoList, setTodoList] = useState([
        { name: "抽中華", done: false },
        { name: "喝劍南春", done: false },
        { name: "燙殺馬特", done: true },
    ])

    /* 添加代辦事項 */
    const addTodoItem: UserInputHandler = (userInput: string) => {
        setTodoList([
            { name: userInput, done: false },
            ...todoList
        ])
    }

    /* 切換代辦事項完成狀態(tài) */
    const switchTodoitemState: ImteClickHandler = (index: number) => {
        setTodoList(
            todoList.map(
                (item, i) => (
                    i !== index ? item : { ...item, done: !item.done }
                )
            )
        )
    }

    /* 根據(jù)條目完成與否返回不同的樣式名 */
    const getTodoitemClassName: ItemClassNameGetter = (index: number) => {
        return todoList[index].done ? "done" : ""
    }

    /* 渲染 */
    return (
        <div className="td-wrapper">
            <h3>TodoList</h3>
            <DataPicker onUserInput={addTodoItem} />
            <DataLister
                list={todoList}
                onItemClick={switchTodoitemState}
                getClassName={getTodoitemClassName}
            />
        </div>
    )
}

用戶輸入框組件實現(xiàn)： src/DataPicker.tsx

import React, { SyntheticEvent, useState } from 'react'

export default function DataPicker({ onUserInput }: DataPickerProps) {

    /* 定義響應式數(shù)據(jù)：用戶輸入的內(nèi)容 */
    const [userInput, setUserInput] = useState("騷年請輸入你的悶響...")

    /* 受控組件的雙向數(shù)據(jù)綁定 */
    const onUserInputChange: EventHandler = (e: SyntheticEvent) => {
        setUserInput((e.target as HTMLInputElement).value)
    }

    /* 處理提交按鈕點擊事件 */
    const onSubmit: EventHandler = (e: SyntheticEvent) => {

        /* 將用戶的輸入告知父組件，由父組件自行定奪如何處置之 */
        onUserInput(userInput)

        // 清空用戶輸入
        setUserInput("")
    }

    /* 渲染 */
    return (
        <div className='dp-wrapper'>
            <input type="text" value={userInput} onChange={onUserInputChange} />
            <button onClick={onSubmit}>提交</button>
        </div>
    )
}

列表展示組件實現(xiàn)： src/DataLister.tsx

export default function DataLister({ list, onItemClick, getClassName }: DataListerProps) {

    return (
        <div className='dl-wrapper'>
            <ul>{
                list.map(
                    (item: TodoItem, index: number) => (
                        <li
                            key={index + item.name}
                            className={getClassName(index)}
                            onClick={() => {
                                /* 告訴父組件第幾個item被點擊了 具體如何處置由父元素自行決定 */
                                onItemClick(index)
                            }}>
                            {item.name}
                        </li>
                    )
                )
            }</ul>
        </div>
    )
}

源碼地址

git clone https://gitee.com/steveouyang/todolist-vite-react-ts.git

到此這篇關(guān)于Vite+React+TypeScript手擼TodoList的項目實踐的文章就介紹到這了,更多相關(guān)Vite React TypeScript TodoList內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: