【REACT18.x】CRA+TS+ANTD5.X实现数据的增删改查

实现了一个完整的列表增删改查的效果，封装了列表项组件，完善了ts类型的补充

实现效果

代码实现

• app.tsx

import React from 'react'
import './App.scss'
import QuestionList4 from './pages/QuestionList4'

function App() {
    return (
        <div className='App'>
            <QuestionList4 />
        </div>
    )
}

export default App

• 页面组件

import React from 'react'
import type { QuestionListProps4 } from '../types'
import './questionList.scss'
import QuestionCard from '../components/QuestionCard4'
import { v4 as uuidv4 } from 'uuid'
import dayjs from 'dayjs'
import { useImmer } from 'use-immer'
import { Button, List } from 'antd'

function QuestionList() {
    const [questionListData, setquestionListData] = useImmer<QuestionListProps4[]>([
        {
            id: uuidv4(),
            title: '问卷1',
            description: '问卷1的描述',
            isPublished: true,
            createdAt: '2021-01-01 00:00:00',
            isEdite: false
        },
        {
            id: uuidv4(),
            title: '问卷2',
            description: '问卷2的描述',
            isPublished: false,
            createdAt: '2021-01-01 00:00:00',
            isEdite: false
        },
        {
            id: uuidv4(),
            title: '问卷3',
            description: '问卷3的描述',
            isPublished: true,
            createdAt: '2021-01-01 00:00:00',
            isEdite: false
        },
        {
            id: uuidv4(),
            title: '问卷4',
            description: '问卷4的描述',
            isPublished: false,
            createdAt: '2021-01-01 00:00:00',
            isEdite: false
        }
    ])
    const handleEdite = (id: string) => {
        console.log(id)
        setquestionListData(draft => {
            draft.forEach(item => {
                if (item.id === id) {
                    item.isEdite = !item.isEdite
                } else {
                    item.isEdite = false
                }
            })
        })
    }

    const handleChangeValue = (id: string, event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value)
        setquestionListData(draft => {
            draft.forEach(item => {
                if (item.id === id) {
                    item.title = event.target.value
                }
            })
        })
    }

    const handleDel = (id: string) => {
        console.log(id)
        setquestionListData(draft => draft.filter(item => item.id !== id))
    }

    const handlePublised = (id: string) => {
        console.log(id)
        setquestionListData(draft => {
            draft.forEach(item => {
                if (item.id === id) {
                    item.isPublished = !item.isPublished
                }
            })
        })
    }
    const handleAdd = () => {
        const newItem = {
            id: uuidv4(),
            title: `问卷${questionListData.length + 1}`,
            description: `问卷${questionListData.length + 1}的描述`,
            isPublished: false,
            createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
            isEdite: false
        }
        setquestionListData(draft => {
            draft.push(newItem)
        })
    }

    return (
        <div>
            <h1>问卷调查列表页</h1>

            <div>
                <div style={{ marginBottom: '20px', textAlign: 'left' }}>
                    <Button type='primary' onClickCapture={handleAdd}>
                        新增
                    </Button>
                </div>
                <List
                    itemLayout='horizontal'
                    dataSource={questionListData}
                    renderItem={item => {
                        return (
                            <QuestionCard
                                {...item}
                                handlePublised={handlePublised}
                                key={item.id}
                                handleDel={handleDel}
                                handleEdite={handleEdite}
                                handleChangeValue={handleChangeValue}
                            />
                        )
                    }}
                ></List>
            </div>
        </div>
    )
}

export default QuestionList

• 列表项组件

import React, { FC } from 'react'
import type { QuestionListProps4 } from '../types'
import QuestionTitle from './QuestionTitle'
import { Button, Flex, message, Popconfirm } from 'antd'

interface QuestionCardProps extends QuestionListProps4 {
    handleEdite: (id: string) => void
    handleDel?: (id: string) => void
    handlePublised?: (id: string) => void
    handleChangeValue: (id: string, event: React.ChangeEvent<HTMLInputElement>) => void
}
const QuestionCard: FC<QuestionCardProps> = props => {
    const { id, title, isPublished, handleEdite, handleDel, handlePublised, createdAt, isEdite, handleChangeValue } =
        props
    function handleConfirm(id: string) {
        if (handleDel) {
            message.success('删除成功')
            handleDel(id)
        }
    }

    function handleCancel(): void {
        message.info('取消删除')
    }

    return (
        <Flex key={id} className='question-item' justify='between' align='center'>
            <QuestionTitle title={title} id={id} isEdite={isEdite} handleChangeValue={handleChangeValue} />
            {isPublished ? (
                <Button variant='text'>已发布</Button>
            ) : (
                <Button color='pink' variant='text'>
                    未发布
                </Button>
            )}
            <span>{createdAt}</span>
            <Button onClick={() => handleEdite(id)}>编辑问卷</Button>
            <Popconfirm
                title='删除问卷'
                description='确定删除该条问卷吗?'
                onConfirm={() => handleConfirm(id)}
                onCancel={handleCancel}
                okText='确定'
                cancelText='取消'
            >
                <Button type='primary' danger>
                    删除
                </Button>
            </Popconfirm>

            <Button variant='solid' color='cyan' onClick={() => handlePublised && handlePublised(id)}>
                发布问卷
            </Button>
        </Flex>
    )
}

export default QuestionCard

• 对应的types

export type QuestionListProps = {
    id: string
    title: string
    description: string
    isPublished: boolean
    createdAt: string
}

export type QuestionListProps4 = QuestionListProps & {
    isEdite: boolean
}

接下来，进一步引入react的状态管理库，对以上的代码进行改造，使其可以使用与大型项目的数据管理