Heim > Artikel > Web-Frontend > 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
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!
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
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ötigenconst DragHandle = sortableHandle(() => <unorderedlistoutline></unorderedlistoutline>);
<br>2
const SortableItem = sortableElement(({item,num}) => (
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.
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}) => (
<br>
Empfohlenes Lernen: „
Video-Tutorial reagierenDas 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!