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é

1. Contexte

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é !

2. Pratique

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.

1. SortableContainer Un conteneur qui réalise le mouvement dans son ensemble

<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 

{children}

;

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>

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'}}/>          

  ));

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.

3. Fonction de réorganisation de tableau arrayMoveImmutable

 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é.

3. Effet global

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

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

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!