用自己的手机做网站,wordpress 打分插件,去视频网站做编辑,微网站 功能写在前边#xff0c;二维数组可以拖拽#xff0c;但是不可以编辑拖拽#xff0c;如果想要实现编辑拖拽#xff0c;还是需要转换成一维数组。原因是因为插件的官方规定#xff0c;在拖拽过程中不可以编辑Droppable层的Props。 相关地址#xff1a;
中文文档地址 react-be…写在前边二维数组可以拖拽但是不可以编辑拖拽如果想要实现编辑拖拽还是需要转换成一维数组。原因是因为插件的官方规定在拖拽过程中不可以编辑Droppable层的Props。 相关地址
中文文档地址 react-beautiful-dnd - 《react-beautiful-dnd 中文文档帮助手册教程》 - 极客文档 (geekdaxue.co) git源码 GitHub - chinanf-boy/react-beautiful-dnd-zh: 翻译: react-beautiful-dnd 文档 ❤️ 更新 ✅ 使用
安装 # yarn yarn add react-beautiful-dnd # npm npm install react-beautiful-dnd --save 引入 import { DragDropContext, Droppable, Draggable } from react-beautiful-dnd; 引用 DraggableList data{listDemo}/DraggableList 一维数组使用
传参data是一维数组
import React, { useEffect, useState } from react;
import { DragDropContext, Draggable, Droppable } from react-beautiful-dnd;interface Props {data: any[];
}
const DraggableList: React.FCProps ({ data }) {const [sortList, setSortList] useState([]);const getItems () {const arr Array.from({ length: 10 }, (v, k) k).map((k) ({id: item-${k},content: item ${k},}));setSortList(arr);};useEffect(() {getItems();}, []);const grid 8;const getItemStyle (isDragging, draggableStyle) ({// some basic styles to make the items look a bit niceruserSelect: none,padding: grid * 2,margin: 0 ${grid}px 0 0,// change background colour if draggingbackground: isDragging ? lightgreen : grey,// styles we need to apply on draggables...draggableStyle,});const getListStyle (isDraggingOver: any) ({background: isDraggingOver ? lightblue : lightgrey,display: flex,padding: grid,overflow: auto,});const onDragEnd (result) {if (!result.destination) {return;}console.log(end, sortList, result);const res sortList.filter((item) item); // 更改引用地址console.log(移动前res, res);const [removed] res.splice(result.source.index, 1);console.log(删除, removed);res.splice(result.destination.index, 0, removed);console.log(添加后, res);setSortList(res);};console.log(data, data);/*** Draggable组件可以拖动并拖放到其Droppables上. 一个Draggable必须始终包含在一个Droppable.* 它是 可能重新排序Draggable在其Droppable家中或移动到另一个Droppable.* 一个Draggable必须包含在一个Droppable.* */return (DragDropContext onDragEnd{onDragEnd}Droppable droppableIddroppable directionhorizontal{(provided, snapshot) (div ref{provided.innerRef} style{getListStyle(snapshot.isDraggingOver)} {...provided.droppableProps}{sortList.map((item, index) (Draggable key{item.id} draggableId{item.id} index{index}{(provided, snapshot) (divref{provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}style{getItemStyle(snapshot.isDragging, provided.draggableProps.style)}{item.content}/div)}/Draggable))}{provided.placeholder}/div)}/Droppable/DragDropContext);
};
export default DraggableList;二维数组的使用
import React, { useEffect, useState } from react;
import { DragDropContext, Draggable, Droppable } from react-beautiful-dnd;interface Props {data: any[];
}
const DraggableList: React.FCProps ({ data [] }) {const [sortList, setSortList] useState(data);const grid 8;const getItemStyle (isDragging, draggableStyle) ({// some basic styles to make the items look a bit niceruserSelect: none,padding: grid * 2,margin: 0 ${grid}px 0 0,// change background colour if draggingbackground: isDragging ? lightgreen : grey,// styles we need to apply on draggables...draggableStyle,});const getListStyle (isDraggingOver) ({background: isDraggingOver ? lightblue : lightgrey,display: flex,padding: grid,overflow: auto,});const onDragEnd (result) {if (!result.destination) {return;}console.log(end, sortList, result);const res sortList.filter((item) item); //修改引用地址console.log(res, res);const [removed] res.splice(result.source.index, 1);console.log(删除, removed);res.splice(result.destination.index, 0, removed);console.log(添加后, res);setSortList(res);};useEffect(() {setSortList(data);}, [data]);console.log(data, data);return (DragDropContext onDragEnd{onDragEnd}{sortList.map((item, index) {return (Droppable droppableId{droppable index} key{index} directionvertical{(provided, snapshot) (div ref{provided.innerRef} style{getListStyle(snapshot.isDraggingOver)} {...provided.droppableProps}{/*{data.map((item, index) (*/}Draggable key{item[0].value} draggableId{item[0].value} index{index}{(provided, snapshot) (divref{provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}style{getItemStyle(snapshot.isDragging, provided.draggableProps.style)}{66666 item[0].label}/div)}/Draggable{/*))}*/}{provided.placeholder}/div)}/Droppable);})}/DragDropContext);
};
export default DraggableList;组件传值的数组内容 const [options, setOptions] useState([{label: 延时时间,value: delayTime,children: [{label: 时,value: hour,disabled: false,},{label: 分,value: minute,disabled: false,},{label: 秒,value: second,disabled: false,},],},{label: 限制类型,value: limitType,children: [{label: 前置点位1,value: 1,disabled: false,},{label: 前置点位2,value: 2,disabled: false,},{label: 前置点位3,value: 3,disabled: false,},],},{label: 温度,value: templete,},]);案列
案例是通过级联的组件选择条件新增条件时前端重新定义数据格式将二维的结构改成一维数组的结构。遍历填充内容时是在Droppable的下一级所以可以修改内容。 const onDispatchValue (res: any) {dispatch({type: ${MODEL_NAME}/save,payload: {proTypeList: res,},});}; // 新增、删除前置条件const [inputFlag, setInputFlag] useState(false);const [listDemo, setListDemo] useState([]);const changeCondition (ids, option) {let arr2 [];// 第三层关系选中两个时的判断if (ids ids.length 1) {// 二维数组结构成一维数组方便去重arr2 ids.reduce((a, b) {return a.concat(b);});const arr3 Array.from(new Set(arr2));if (arr2.length ! arr3.length) {setRepeatFlag(true);return message.warning(前置条件重复请删除);} else {setRepeatFlag(false);}}// 没有子级或者全选的判断ids.map((item, index) {if (item.length 1 option[index][0].value item[0] option[index][0]?.children?.length 0) {setRepeatFlag(true);return message.warning(前置条件重复请删除);} else {setRepeatFlag(false);}});const arr option.map((item) {let obj {typeName: , // 类型名称typeValue: , // 类型idunitName: , // 单位名称unitValue: , // 单位idvalue: , // 值};item.map((i, index) {if (item.length 1) {obj.typeName i.label;obj.typeValue i.value;}if (item.length 2) {if (index 1) {obj.unitName i.label;obj.unitValue i.value;} else {obj.typeName i.label;obj.typeValue i.value;}}});return obj;});setListDemo(arr);// 保存定义好的数据用于组件之间传值onDispatchValue(arr);};
// 父组件引用
DraggableList data{proTypeList}/DraggableList
// 子组件
import { ConnectState } from /typing/connect;
import { connect } from /exports;
import { Input } from antd;
import React, { useEffect, useState } from react;
import { DragDropContext, Draggable, Droppable } from react-beautiful-dnd;
import { Dispatch } from umi;
interface Props {data: any[];dispatch: Dispatch;
}const MODEL_NAME mainConfig;
const DraggableList: React.FCProps ({ data [], dispatch }) {const [sortList, setSortList] useState(data);// 拖拽时的样式const getListStyle () ({overflow: auto,width: 100%,});// 拖拽后的样式const getItemStyle (isDragging, draggableStyle) ({// some basic styles to make the items look a bit nicerwidth: 100%,userSelect: none,...draggableStyle,});const onDragEnd (result) {if (!result.destination) {return;}const res sortList.filter((item) item); //修改引用地址const [removed] res.splice(result.source.index, 1);res.splice(result.destination.index, 0, removed);// console.log(添加后, res);setSortList(res);dispatch({type: ${MODEL_NAME}/save,payload: {proTypeList: res,},});console.log(拖拽后, res);};// 校验输入框内容const regInputValue (e: any, index: number) {// 输入框聚焦时const arr data.filter((item) item);arr[index].value e.target.value;console.log(arr, arr);setSortList(arr);dispatch({type: ${MODEL_NAME}/save,payload: {proTypeList: arr,},});};useEffect(() {setSortList(data);}, [data]);// console.log(弹窗起落data, data);/*** Draggable组件可以拖动并拖放到其Droppables上. 一个Draggable必须始终包含在一个Droppable.* 它是 可能重新排序Draggable在其Droppable家中或移动到另一个Droppable.* 一个Draggable必须包含在一个Droppable.* */return (DragDropContext onDragEnd{onDragEnd}Droppable droppableIddroppable directionhorizontal{(provided, snapshot) (div ref{provided.innerRef} style{getListStyle(snapshot.isDraggingOver)} {...provided.droppableProps}{data.map((item, index) (Draggable key{item.typeValue} draggableId{item.typeValue} index{index}{(provided, snapshot) (divref{provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}style{getItemStyle(snapshot.isDragging, provided.draggableProps.style)}div style{{ width: 100%, display: flex, justifyContent: flex-start, textAlign: center }}div style{{ width: 33%, backgroundColor: #f2f2f2, padding: 8px 0 }}条件名称/divdiv style{{ width: 33%, backgroundColor: #f2f2f2, padding: 8px 0 }}条件值/divdiv style{{ width: 33%, backgroundColor: #f2f2f2, padding: 8px 0 }}单位名称/div/divdivstyle{{width: 100%,display: flex,justifyContent: flex-start,padding: 6px,textAlign: center,marginBottom: 16,}}div style{{ width: 33%, padding: 8px 0 }}{item.typeName}/divdiv style{{ width: 33%, padding: 8px 0 }}Inputplaceholder请输入内容onChange{(e) {regInputValue(e, index);}}//divdiv style{{ width: 33%, padding: 8px 0 }}{item.unitName}/div/div/div)}/Draggable))}{provided.placeholder}/div)}/Droppable/DragDropContext);
};
export default connect(({ mainConfig }: ConnectState) ({mainConfig ,
}))(DraggableList);
