So implementieren Sie die Listensortierung in React

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

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!

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(                                    )               })             }                             

          备注                    

        

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

        必填          {           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>

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!