今天小編給大家分享一下react如何實現(xiàn)列表排序的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

為東山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及東山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、東山網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

react實現(xiàn)列表排序的方法：1、將整體設(shè)置成一個無序列表，并將子元素放置li內(nèi)；2、在“Radio.Group”中進行Radio的移動；3、通過arrayMoveImmutable數(shù)組重新排序函數(shù)實現(xiàn)列表排序即可。

react 自定義拖拽排序列表

一、背景

最近在公司開發(fā)時，遇到需要自定表單，并且自定表單中的單選和復(fù)選選項需要用戶可以自定義拖拽排序，經(jīng)過一個星期的查閱各種資料和實踐，寫個總結(jié)！

二、實踐

經(jīng)過一系列的查詢，發(fā)現(xiàn)React Sortable與array-move可以實現(xiàn)這一功能！

要實現(xiàn)是需要三個主要組件。

1、SortableContainer整體實現(xiàn)移動的容器

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

我們將整體設(shè)置成一個無序列表，將子元素放置li內(nèi)，方便我們進行排序！

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

onSortEnd移動完畢后執(zhí)行的函數(shù)

 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'}}/>
   
   

 ));

對象需要自己構(gòu)建,我這邊由于元素比較多，所以看起來比較復(fù)雜。

我們的需求是需要在Radio.Group中進行Radio的移動。所以將Radio封裝到SortableItem中。

其中，接受的參數(shù)可以自定義，但需要和

中的名字對應(yīng)起來，其中不能用index作為參數(shù)名。

3、arrayMoveImmutable 數(shù)組重新排序函數(shù)

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

arrayMoveImmutable函數(shù)接受3個參數(shù)，一個是操作的數(shù)組，一個是操作元素原本的index，一個是新的操作元素所放置的index。函數(shù)返回移動完畢的數(shù)組。

三、整體效果

因此，我們的操作步驟結(jié)束，整體代碼。沒有導入的包需要自行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如何實現(xiàn)列表排序”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。