Reactでリストソートを実装する方法

リストの並べ替えを実装するための React メソッド: 1. 全体を順序なしリストに設定し、サブ要素を li に配置します; 2. 「Radio.Group」で Radio を移動します; 3. arrayMoveImmutable を介して配列の並べ替え関数を使用します。リストを並べ替えるのに使用できます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応カスタム ドラッグ アンド ドロップ ソート リスト

1. 背景

社内で開発していた頃最近、フォームをカスタマイズする必要があることに遭遇しました。カスタム フォームのラジオとチェック オプションでは、ユーザーがドラッグ アンド ドロップの並べ替えをカスタマイズする必要があります。1 週間さまざまな情報を確認し、実践した後、まとめを書きます!

2. 実践

一連のクエリの後、React Sortable と array-move でこの機能を実現できることがわかりました。

公式 Web サイトのリンクを添付しますReact Sortable Higher-order Components

対応する git ソース コードhttps:// www.php .cn/link/64bba6f0069347b04a9de74a54352890

公式 Web サイトの事例から学び、対応する需要開発を開始してください。

実装には 3 つの主要コンポーネントが必要です。

1, SortableContainer 全体としての移動を実現するコンテナ

<sortablecontainer>
    {
     radioList.map((item,index)=>{
         return(
             <sortableitem></sortableitem>
            )
        })
    }
</sortablecontainer>

全体を順序なしリストに設定し、簡単にするために li にサブ要素を配置します。私たちの仕分け！

  const SortableContainer = sortableContainer(({children}) => {
  return 

{children}

;

onSortEnd 移動完了後に実行される関数

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

useDragHandle 移動したコントロール(フォーカス) --- 書く必要はありません必要ない場合はそれを実行してください

  const DragHandle = sortableHandle(() => <unorderedlistoutline></unorderedlistoutline>);

<br>

2. SortableItem 移動オブジェクト

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

  ));

オブジェクトは自分で構築する必要があります。ここには要素がたくさんあるため、より複雑に見えます。

私たちの要件は、Radio.Group に Radio を移動することです。したがって、Radio を SortableItem にカプセル化します。

このうち、受け入れられるパラメータはカスタマイズ可能ですが、

内の名前に対応する必要があり、パラメータ名としてインデックスを使用することはできません。

3. arrayMoveImmutable 配列並べ替え関数

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

arrayMoveImmutable 関数は 3 つのパラメーターを受け取ります。1 つは演算の配列、1 つは演算要素の元のインデックス、もう 1 つは演算要素の元のインデックスです。新しい操作要素はインデックスに配置されます。この関数は移動された配列を返します。

3. 全体的な効果

したがって、コード全体の操作手順は終了です。インポートされていないパッケージは、npm を使用して自分でインストールする必要があります。

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 RadioComponentrree

推奨学習: 「react ビデオ チュートリアル 」

以上がReactでリストソートを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。