반응에서 목록 정렬을 구현하는 방법
- 藏色散人원래의
- 2022-12-27 09:59:463143검색
반응에서 목록 정렬을 구현하는 방법: 1. 전체를 순서가 없는 목록으로 설정하고 하위 요소를 li에 배치합니다. 2. "Radio.Group"에서 라디오를 이동합니다. 3. arrayMoveImmutable 배열을 통해 함수를 재정렬합니다. 정렬.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
react custom 드래그 앤 드롭 정렬 목록
1. Background
최근 회사에서 개발을 하다가 폼을 커스터마이징해야 할 필요성을 느꼈는데, 커스터마이징 폼의 라디오와 체크 옵션도 같이 해줘야 합니다. 사용자 정의 드래그 앤 드롭 정렬을 정의하세요. 일주일 동안 다양한 자료와 실습을 검토한 후 요약을 작성하세요!
2. 연습
몇번의 쿼리 끝에 React Sortable과 array-move가 이 기능을 구현할 수 있다는 것을 알았습니다!
첨부된 공식 웹사이트 링크입니다React Sortable Higher-order Components
해당 git 소스 코드https://www.php.cn/link/64bba6f0069347b04a9de74a54352890
그래서 시작합니다 우리의 서신은 공식 홈페이지 케이스 요구사항 개발 !
구현하려면 세 가지 주요 구성 요소가 필요합니다.
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.
const SortableItem = sortableElement(({item,num}) => (
객체를 직접 구성해야 하는데, 여기에 요소가 더 많아져서 더 복잡해 보입니다.
우리의 요구 사항은 Radio.Group에서 라디오를 이동하는 것입니다. 따라서 Radio를 SortableItem으로 캡슐화합니다.
그 중 허용되는 매개변수는 사용자 정의가 가능하지만,
에 있는 이름과 일치해야 하며, index는 매개변수 이름으로 사용할 수 없습니다.
3. arrayMoveImmutable 배열 재정렬 함수
const onSortEnd = ({oldIndex, newIndex}) => {
var arry1 = arrayMoveImmutable(radioList,oldIndex,newIndex)
setRadioList(arry1);
};
arrayMoveImmutable 함수는 3개의 매개변수를 받습니다. 하나는 연산의 배열이고, 하나는 연산 요소의 원래 인덱스이고, 다른 하나는 새 연산 요소가 배치되는 인덱스입니다. 이 함수는 이동된 배열을 반환합니다.
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}) => (
- {children}
<br>
추천 학습: "react 비디오 튜토리얼"
위 내용은 반응에서 목록 정렬을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!