成都网站建设设计

将想法与焦点和您一起共享

react如何实现列表排序

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

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

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

react 自定义拖拽排序列表

一、背景

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

react如何实现列表排序

二、实践

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

react如何实现列表排序

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

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中。

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

    react如何实现列表排序

    中的名字对应起来,其中不能用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(
                     
                   )
                 })
               }
             

           

           

             备注
             
           

           

           
             |
           
           

           必填
                    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如何实现列表排序”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


    名称栏目:react如何实现列表排序
    浏览路径:http://chengdu.cdxwcx.cn/article/gecdhd.html