react-dnd拖拽表单组件列表实例_const defaultlist =-优快云博客

本文链接：https://blog.youkuaiyun.com/gaofeng6565/article/details/115697473

本文介绍如何使用React-DND库创建一个可拖拽的表单组件列表。通过API学习和项目准备，详细阐述了在CodePen上使用React和AntDesign构建这样一个功能的过程，包括添加依赖和编写ListDrag.js、DndComponents.js及DndCompents.css等关键文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

API 学习：https://blog.youkuaiyun.com/gaofeng6565/article/details/115696823

项目准备：https://codepen.io/ 选择React，AntDesign 模式，添加依赖 react-dnd(@14.0.2)，react-dnd-html5-backend(@14.0.0)

ListDrag.js

import React, { useState } from "react";
import { Button } from "antd";
import {DndProvider} from 'react-dnd'

import {HTML5Backend} from "react-dnd-html5-backend";
import List from "./DndCompents";
const defaultList = [
    { id: 1, title: "item1" },
    { id: 2, title: "item2" },
    { id: 3, title: "item3" },
    { id: 4, title: "item4" },
    { id: 5, title: "item5" },
];
function ListDrag() {
    const [list, setList] = useState(defaultList);
    const [activeItem, setActiveItem] = useState(0);
    const onDropEnd = (list, fromIndex, toIndex) => {
        setList([...list]);
    };
    const onDelete = (list) => {
        setList([...list]);
    };
    const onClick = (item) => {
        if (item.id !== activeItem.id) {
            setActiveItem(item);
        }
    };
    const onAdd = () => {
        let createList = {
            id: list.length + 1,
            title: `item${list.length + 1}`
        }
        let newlist = [...list].concat(createList);
        setList([...newlist]);
    }
    return (
        <div className="list-wrap">
            <Button type='primary' onClick={onAdd}>添加</Button>
            <DndProvider backend={HTML5Backend}>
                <List
                    list={list}
                    activeItem={activeItem}
                    onDropEnd={onDropEnd}
                    onDelete={onDelete}
                    onClick={onClick}
                />
            <