react如何實(shí)現(xiàn)列表排序

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

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

react 自定義拖拽排序列表

一、背景

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

二、實(shí)踐

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

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

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

<SortableContainer onSortEnd={onSortEnd} useDragHandle>
    {
     radioList.map((item,index)=>{
         return(
             <SortableItem key={`item-${item.id}`} index={index} item = {item} num={index} />
            )
        })
    }
</SortableContainer>

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

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

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

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

useDragHandle 移動的控件（焦點(diǎn)）---如果不需要可以不寫

  const DragHandle = sortableHandle(() => <UnorderedListOutline  style = {{position:'absolute',right:'30px',top:'10px',display:isEdit == true ? '':'none'}}/>);

2、SortableItem 移動的對象

  const SortableItem = sortableElement(({item,num}) => (
    <li>
      <Radio key = {item.id} value = {item.value} style = {{width:'100%',position:'relative'}} >
      <Input style = {{border:'none',width:'96%'}} placeholder = {`選項(xiàng)${num+1}`} defaultValue={item.value}
        onBlur = {(e)=>{
        item.value = e.target.value
        console.log(item.value);
        setRadioList([...radioList])}}
        readOnly = {isEdit == true ? '':'none'}></Input>
        <DragHandle  />
      <CloseCircleOutline  onClick = {()=>{deleteRadio(item)}} style = {{position:'absolute',right:'10px',top:'10px',display:isEdit == true ? '':'none'}}/>
    </Radio>
    </li>
  ));

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

我們的需求是需要在Radio.Group中進(jìn)行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é)束，整體代碼。沒有導(dǎo)入的包需要自行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)
  }
  // 刪除選項(xiàng)
  const deleteRadio = (item)=>{
    console.log(item);
    if(radioList.indexOf(item) > -1){
      radioList.splice(radioList.indexOf(item),1)
    }
    setRadioList([...radioList])
  }

  const SortableItem = sortableElement(({item,num}) => (
    <li>
      <Radio key = {item.id} value = {item.value} style = {{width:'100%',position:'relative'}} >
      <Input style = {{border:'none',width:'96%'}} placeholder = {`選項(xiàng)${num+1}`} defaultValue={item.value}
        onBlur = {(e)=>{
        item.value = e.target.value
        console.log(item.value);
        setRadioList([...radioList])}}
        readOnly = {isEdit == true ? '':'none'}></Input>
        <DragHandle  />
      <CloseCircleOutline  onClick = {()=>{deleteRadio(item)}} style = {{position:'absolute',right:'10px',top:'10px',display:isEdit == true ? '':'none'}}/>
    </Radio>
    </li>
  ));
  const onSortEnd = ({oldIndex, newIndex}) => {
    var arry1 = arrayMoveImmutable(radioList,oldIndex,newIndex)
    setRadioList(arry1);
  }; 
  const DragHandle = sortableHandle(() => <UnorderedListOutline  style = {{position:'absolute',right:'30px',top:'10px',display:isEdit == true ? '':'none'}}/>);
  const SortableContainer = sortableContainer(({children}) => {
  return <ul>{children}</ul>;
});
    return(
      <div id = {componentIndex} style = {{backgroundColor:'#fff', paddingTop:'10px',paddingLeft:'20px'}} >
        <span style = {{display: required == true ? '':'none',color:'red',fontSize:'20px'}}>*</span>
          <span style={{fontWeight:'bold',fontSize:'14px'}}>{componentIndex} [單選]</span>
        <Input placeholder = "請輸入問題" defaultValue = {radioTitle === ''? componentTitle:componentTitle} autoFocus style = {{width:'80%',border:'none',paddingLfet:'5px'}} onBlur={e=>{setRadioTitle(e.target.value);}} readOnly = {isEdit == true ? '':'none'} >
        </Input>
        <Radio.Group style = {{display:'block'}}>
          <SortableContainer onSortEnd={onSortEnd} useDragHandle  >
           {
              radioList.map((item,index)=>{
                return(
                  <SortableItem key={`item-${item.id}`} index={index} item = {item} num={index} />
                )
              })
            }
          </SortableContainer>
        </Radio.Group>
        <div style = {{display:remark == true ? '':'none',fontSize:'14px'}}>
          <span>備注</span><Input style={{border:'none',width:'80%'}} placeholder='請輸入' readOnly = {isEdit == true ? '':'none'}></Input>
          <DeleteOutline onClick={deleteRemark} style={{float:'right',margin:'10px',display:isEdit == true ? '':'none'}}/>
        </div>
        <div style={{display:isEdit == true ? '':'none'}}>
        <Button type="link" onClick={()=>{setRadioList([...radioList,{id:id,value:''}]);setId(id+1);console.log(radioList);}}>添加選項(xiàng)</Button>
          <span style={{display:remark == false ? '':'none'}}>|</span>
        <Button type="link" style={{display:remark == false ? '':'none'}} onClick={addRemark}>添加[備注]項(xiàng)</Button>
        <div style={{borderTop:'1px #d7d7d7 solid ',paddingTop:'10px',marginTop:'15px',marginLeft:'-15px'}}>
        <Checkbox onChange={onChange}>必填</Checkbox>
        <DeleteOutline  
          onClick={async () => {
          const result = await Dialog.confirm({
            content: '是否確定刪除該題目？',
          })
          if (result) {
            Toast.show({ content: '點(diǎn)擊了確認(rèn)', position: 'bottom' })
            onDelete(componentIndex)
          } else {
            Toast.show({ content: '點(diǎn)擊了取消', position: 'bottom' })
          }
          }} style={{float:'right',margin:'10px'}}  />
        </div>
        </div>
      </div>
 
    )
  
}
export default RadioComponent

以上就是“react如何實(shí)現(xiàn)列表排序”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。