react如何实现列表排序

今天小编给大家分享一下react如何实现列表排序的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

为东山等地区用户提供了全套网页设计制作服务，及东山网站建设行业解决方案。主营业务为成都网站设计、网站建设、东山网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

react实现列表排序的方法：1、将整体设置成一个无序列表，并将子元素放置li内；2、在“Radio.Group”中进行Radio的移动；3、通过arrayMoveImmutable数组重新排序函数实现列表排序即可。

react 自定义拖拽排序列表

一、背景

最近在公司开发时，遇到需要自定表单，并且自定表单中的单选和复选选项需要用户可以自定义拖拽排序，经过一个星期的查阅各种资料和实践，写个总结！

二、实践

经过一系列的查询，发现React Sortable与array-move可以实现这一功能！

要实现是需要三个主要组件。

1、SortableContainer整体实现移动的容器

   {
    radioList.map((item,index)=>{
        return(
            
           )
       })
   }

我们将整体设置成一个无序列表，将子元素放置li内，方便我们进行排序！

  const SortableContainer = sortableContainer(({children}) => {
 return 
{children}
;

onSortEnd移动完毕后执行的函数

 const onSortEnd = ({oldIndex, newIndex}) => {
   var arry1 = arrayMoveImmutable(radioList,oldIndex,newIndex)
   setRadioList(arry1);
 };

useDragHandle移动的控件（焦点）---如果不需要可以不写

  const DragHandle = sortableHandle(() => );

2、SortableItem 移动的对象

  const SortableItem = sortableElement(({item,num}) => (
   

     
            onBlur = {(e)=>{
       item.value = e.target.value
       console.log(item.value);
       setRadioList([...radioList])}}
       readOnly = {isEdit == true ? '':'none'}>
       
     {deleteRadio(item)}} style = {{position:'absolute',right:'10px',top:'10px',display:isEdit == true ? '':'none'}}/>
   
   

 ));

对象需要自己构建,我这边由于元素比较多，所以看起来比较复杂。

我们的需求是需要在Radio.Group中进行Radio的移动。所以将Radio封装到SortableItem中。

其中，接受的参数可以自定义，但需要和

中的名字对应起来，其中不能用index作为参数名。

3、arrayMoveImmutable 数组重新排序函数

 const onSortEnd = ({oldIndex, newIndex}) => {
   var arry1 = arrayMoveImmutable(radioList,oldIndex,newIndex)
   setRadioList(arry1);
 };

arrayMoveImmutable函数接受3个参数，一个是操作的数组，一个是操作元素原本的index，一个是新的操作元素所放置的index。函数返回移动完毕的数组。

三、整体效果

因此，我们的操作步骤结束，整体代码。没有导入的包需要自行npm 安装！

import React, { useState,useEffect } from "react";
import { Input,Radio, Button,Space,Checkbox,Form  } from "antd";
import { DeleteOutline, CloseCircleOutline,UnorderedListOutline } from 'antd-mobile-icons'
import { Dialog, Toast, Divider } from 'antd-mobile'
import {
 sortableContainer,
 sortableElement,
 sortableHandle,
} from 'react-sortable-hoc';
import {arrayMoveImmutable} from 'array-move';

const RadioComponent = (props) => {
 const {onDelete,onListDate,componentIndex,setIsEdit,isEdit,componentTitle,componentDate,previewVisible} = props;
 const [radioList,setRadioList] = useState([])
 const [remark, setRemark] = useState(false)
 const [required, setRequired] = useState(false)
 const [radioTitle, setRadioTitle] = useState('')
 const [id, setId] = useState(2)
 const [radioId, setRadioId] = useState(111211)
 useEffect(()=>{
   if(componentDate !== undefined){
     setRadioList(componentDate)
   }else{
     setRadioList([{id:0,value:''},{id:1,value:''}])
   }
 },[componentIndex])

 useEffect(()=>{
   if(isEdit === false && previewVisible === undefined){
     onListDate(radioList,radioTitle,required,remark)
   }
 },[isEdit])

 const onChange = (e) => {
   console.log(e.target.value);
   setRequired(e.target.checked)
 };
 // 添加备注
 const addRemark = ()=>{
   setRemark(true)
 }
 // 删除备注
 const deleteRemark = ()=>{
   setRemark(false)
 }
 // 删除选项
 const deleteRadio = (item)=>{
   console.log(item);
   if(radioList.indexOf(item) > -1){
     radioList.splice(radioList.indexOf(item),1)
   }
   setRadioList([...radioList])
 }

 const SortableItem = sortableElement(({item,num}) => (
   

     
            onBlur = {(e)=>{
       item.value = e.target.value
       console.log(item.value);
       setRadioList([...radioList])}}
       readOnly = {isEdit == true ? '':'none'}>
       
     {deleteRadio(item)}} style = {{position:'absolute',right:'10px',top:'10px',display:isEdit == true ? '':'none'}}/>
   
   

 ));
 const onSortEnd = ({oldIndex, newIndex}) => {
   var arry1 = arrayMoveImmutable(radioList,oldIndex,newIndex)
   setRadioList(arry1);
 };
 const DragHandle = sortableHandle(() => );
 const SortableContainer = sortableContainer(({children}) => {
 return 
{children}
;
});
   return(
     

       *
         {componentIndex} [单选]
       {setRadioTitle(e.target.value);}} readOnly = {isEdit == true ? '':'none'} >
       
       
         
          {
             radioList.map((item,index)=>{
               return(
                 
               )
             })
           }
         
       
       

         备注
         
       

       

       {setRadioList([...radioList,{id:id,value:''}]);setId(id+1);console.log(radioList);}}>添加选项
         |
       添加[备注]项
       

       必填
                onClick={async () => {
         const result = await Dialog.confirm({
           content: '是否确定删除该题目？',
         })
         if (result) {
           Toast.show({ content: '点击了确认', position: 'bottom' })
           onDelete(componentIndex)
         } else {
           Toast.show({ content: '点击了取消', position: 'bottom' })
         }
         }} style={{float:'right',margin:'10px'}}  />
       

       

     


   )
 
}
export default RadioComponent

以上就是“react如何实现列表排序”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

当前名称：react如何实现列表排序
地址分享：http://shouzuofang.com/article/gecdhd.html