【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的状态管理库，对以上的代码进行改造，使其可以使用与大型项目的数据管理