React+hook+ts+ant design封装一个具有动态表格得页面-阿里云开发者社区

需求分析

在前端项目中最常见得是可以增加多个表格数据得一个表单

功能思维

首先需要通过数组遍历

{data && data.map((item, index) => (
                        <Row style={{ marginTop: "20px" }} gutter={24}>
                            <Col span={4}>
                                <Form.Item
                                    key={index}
                                    labelCol={{ span: 13 }}
                                    wrapperCol={{ span: 8, offset: 1 }}
                                    label="缸数/匹号"
                                    name={`batchCode-${index}`}
                                    rules={[{ required: true, message: '请输入缸数/匹号' }]}
                                    <Input />
                                </Form.Item>
                            </Col>

此处通过数组遍历得方法分配索引

索引处理成为数组对象

此时需要把所在得索引变成数组对象

//数组对象自己转换为数组
export function myFunc(obj: any) {
    const newObj: any = {}
    for (const [key, value] of Object.entries(obj)) {
        const strList = key.split('-')
        const groupId = strList.pop() // 拿到最后一个"-"之后的字符
        const keyName = strList.join('') // 最后一个"-"之前的所有字符再加起来(理论上如果只有一个"-"可以直接key.split('-')[0]和key.split('-')[1])
        if (!newObj[groupId as string]) {
            newObj[groupId as string] = {}
        newObj[groupId as string][keyName] = value
    return Object.values(newObj)
}

这一部分就可以讲数组对象转换为数组

记住要设置一个number进行+1操作

const handleAdd = () => {
        const newData = data;
        newData.push({ index: number });
        console.log(newData, "newData")
        setNumber(number + 1)
        setData(newData)
    }

删除

const handleRemove = (index: number) => {
        console.log(index)
        const newData = data.splice(1, index)
        console.log(newData, "newData")
        setData(newData)
    }

获取值

const res = await form.validateFields()

总结

我是歌谣放弃很容易坚持一定很酷关注前端小歌谣带你进入前端巅峰交流群

前端项目实战44-cannot be compiled under ‘--isolatedModules‘ because it is considered a global script file. java实战小结-Controller报错：Content type ‘multipart/form-data；boundary=----WebKitFormBoundaryxxxx not supp ts重点学习138-ts.config.json笔记 ts重点学习140-rollup打包ts文件笔记前端项目实战44-cannot be compiled under ‘--isolatedModules‘ because it is considered a global script file. java实战小结-Controller报错：Content type ‘multipart/form-data；boundary=----WebKitFormBoundaryxxxx not supp ts重点学习138-ts.config.json笔记 ts重点学习140-rollup打包ts文件笔记 React组件库设计 | 关于我一边写Concis一边给字节组件库arco design提pr的分享

看过我最近的一些文章的小伙伴应该都知道，博主最近半年时间一直在写自己的React组件库Concis，其实这也是从造轮子 -> 学习的目的去做这件事的。

【React工作记录三十九】ant design控制tag选中的写法【React工作记录三十九】ant design控制tag选中的写法

【React工作记录三十九】ant design控制tag选中的写法