Maison > Article > interface Web > Comment implémenter le tri de liste en réaction
Comment implémenter le tri de liste dans React : 1. Placez le tout dans une liste non ordonnée et placez les sous-éléments dans li ; 2. Déplacez Radio dans "Radio.Group" 3. Réorganisez la fonction via le tableau arrayMoveImmutable ; liste.
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Réagir à une liste triée par glisser-déposer personnalisé
Récemment, lors du développement dans l'entreprise, j'ai rencontré le besoin de personnaliser le formulaire, et les options de radio et de vérification dans le formulaire personnalisé doivent être personnalisé par l'utilisateur. Définissez le tri par glisser-déposer, et après une semaine de révision de diverses informations et pratiques, rédigez un résumé !
Après une série de requêtes, j'ai découvert que React Sortable et array-move peuvent réaliser cette fonction !
Ci-joint le lien du site officielReact Sortable High-order Components
Code source git correspondanthttps://www.php.cn/link/64bba6f0069347b04a9de74a54352890
Alors nous commençons notre correspondance en apprenant de le cas du site officiel Développement des exigences !
Trois composants principaux sont nécessaires à la mise en œuvre.
<sortablecontainer> { radioList.map((item,index)=>{ return( <sortableitem></sortableitem> ) }) } </sortablecontainer>
Nous mettons le tout dans une liste non ordonnée et plaçons les sous-éléments en li pour faciliter notre tri !
const SortableContainer = sortableContainer(({children}) => { return
onSortEnd Fonction exécutée une fois le mouvement terminé
const onSortEnd = ({oldIndex, newIndex}) => { var arry1 = arrayMoveImmutable(radioList,oldIndex,newIndex) setRadioList(arry1); };
useDragHandle Contrôle de déplacement (focus) --- Vous n'avez pas besoin de l'écrire si vous n'en avez pas besoin
const DragHandle = sortableHandle(() => <unorderedlistoutline></unorderedlistoutline>);
<br>
const SortableItem = sortableElement(({item,num}) => (
L'objet doit être construit par vous-même. Comme il y a plus d'éléments ici, cela semble plus compliqué.
Notre exigence est de déplacer Radio dans Radio.Group. Encapsulez donc Radio dans SortableItem.
Parmi eux, les paramètres acceptés peuvent être personnalisés, mais ils doivent correspondre aux noms dans
, et l'index ne peut pas être utilisé comme nom de paramètre.
const onSortEnd = ({oldIndex, newIndex}) => { var arry1 = arrayMoveImmutable(radioList,oldIndex,newIndex) setRadioList(arry1); };
La fonction arrayMoveImmutable accepte 3 paramètres, l'un est le tableau de l'opération, l'un est l'index d'origine de l'élément d'opération et l'autre est l'index où le nouvel élément d'opération est placé. La fonction renvoie le tableau déplacé.
Ainsi, nos étapes de fonctionnement sont terminées, le code global. Les packages qui ne sont pas importés doivent être installés par npm vous-même !
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>
Apprentissage recommandé : "tutoriel vidéo React"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!