Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Listensortierung in React

So implementieren Sie die Listensortierung in React

藏色散人
藏色散人Original
2022-12-27 09:59:463074Durchsuche

So implementieren Sie die Listensortierung in React: 1. Setzen Sie das Ganze in eine ungeordnete Liste und platzieren Sie die Unterelemente in li; Liste.

So implementieren Sie die Listensortierung in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Benutzerdefinierte per Drag & Drop sortierte Liste reagieren

1. Hintergrund

Bei der Entwicklung im Unternehmen bin ich kürzlich auf die Notwendigkeit gestoßen, das Formular anzupassen, und die Radio- und Prüfoptionen im benutzerdefinierten Formular müssen angepasst werden Vom Benutzer angepasst. Definieren Sie die Drag-and-Drop-Sortierung. Schreiben Sie nach einer Woche der Durchsicht verschiedener Materialien und Praktiken eine Zusammenfassung!

So implementieren Sie die Listensortierung in React

2. Üben

Nach einer Reihe von Abfragen habe ich festgestellt, dass React Sortable und Array-Move diese Funktion erreichen können! Im Anhang finden Sie den offiziellen Website-Link unsere Korrespondenz, indem wir daraus lernen Die offizielle Website zum Thema Anforderungsentwicklung!

Für die Umsetzung sind drei Hauptkomponenten erforderlich.

1.

SortableContainer Ein Container, der Bewegung als Ganzes realisiert

<sortablecontainer>
    {
     radioList.map((item,index)=>{
         return(
             <sortableitem></sortableitem>
            )
        })
    }
</sortablecontainer>
Wir setzen das Ganze in eine ungeordnete Liste und platzieren die Unterelemente in li, um unsere Sortierung zu erleichtern!

  const SortableContainer = sortableContainer(({children}) => {
  return 
    {children}
;onSortEnd Funktion, die nach Abschluss der Bewegung ausgeführt wird

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

useDragHandle

Steuerung zum Verschieben (Fokus) --- Sie müssen es nicht schreiben, wenn Sie es nicht benötigen

  const DragHandle = sortableHandle(() => <unorderedlistoutline></unorderedlistoutline>);
<br>
2
  const SortableItem = sortableElement(({item,num}) => (
    

  •              {         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'}}/>          
  •   )); Das Objekt muss selbst konstruiert werden. Da es hier mehr Elemente gibt, sieht es komplizierter aus.

    Unsere Anforderung ist, Radio in Radio.Group zu verschieben. Kapseln Sie Radio also in SortableItem.

    Unter diesen können die akzeptierten Parameter angepasst werden, sie müssen jedoch den Namen in

    entsprechen und der Index kann nicht als Parametername verwendet werden.

    3. arrayMoveImmutable-Array-Neuordnungsfunktion

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

    arrayMoveImmutable-Funktion akzeptiert 3 Parameter, einer ist das Array der Operation, einer ist der ursprüngliche Index des Operationselements und der andere ist der Index, an dem das neue Operationselement platziert wird. Die Funktion gibt das verschobene Array zurück.

    3. Gesamteffekt

    Also, unsere Operationsschritte sind vorbei, der Gesamtcode. Pakete, die nicht importiert werden, müssen von npm selbst installiert werden!

    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}) => (
        
  •              {         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(() => <unorderedlistoutline></unorderedlistoutline>);   const SortableContainer = sortableContainer(({children}) => {   return 
      {children}
    ; });     return(       
            *           {componentIndex} [单选]         {setRadioTitle(e.target.value);}} readOnly = {isEdit == true ? '':'none'} >                                         {               radioList.map((item,index)=>{                 return(                                    )               })             }                             
              备注                    
            
                       |                  
            必填          {           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
    <br>

    So implementieren Sie die Listensortierung in React

    Empfohlenes Lernen: „

    Video-Tutorial reagieren

    Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Listensortierung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn