更改页面后，使用bootstrap + React列出和分页的HTML元素值不会保存,React + Bootstrap

我有一个“分页”组件，它负责对作为参数传递的项目（通常是某种测试的问题）进行分页。根据页面对组件进行分页并在屏幕上绘制。正如我们所看到的，使用分页的元素传递了一个包含几个问题的测试数组，并指示它希望制作包含5个问题的页面：

const dataTest = [
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 1</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 2</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 3</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 4</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 5</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 6</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 7</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 8</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>,
        <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 9</span></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-1" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-1">Yes</label></div></div><div className="col-3 col-md-1 col-lg-1 col-xl-1"><div className="form-check"><input id="formCheck-2" className="form-check-input" type="checkbox" /><label className="form-check-label" for="formCheck-2">No</label></div></div></div></>
    ]
    const showPage =  () => {

    }

    return (
        <>
        <Paginacion elementsList={dataTest} currentPagePar={1} rangePagesPar={5} />
        data 
        </>

    )

接下来，我们有分页组件，它使用一个非常简单的帮助器子组件（写在最后），其目的是保存ID，以便能够很好地列出它与. map。

import { ReactDOM, useCallback, useEffect, useState } from "react"
import React from "react"

export const Paginacion = ({elementsList, currentPagePar, rangePagesPar}) => {

    const [fullList, setFullList] = useState([])
    const [currentList, setCurrentList] = useState([])
    const [currentPage, setCurrentPage] = useState(currentPagePar)
    const [rangePages, setRangePages] = useState(rangePagesPar) //10 items per page.

    //use Effect load
    useEffect (() =>{
        const data = [];
        for (let index = 0; index <elementsList.length; index++){
            const current = <ElementoPaginacion element={elementsList[index]} key={index} />
            data.push(current);
        }
        setFullList(data);
    }
    ,[]);

    const changePage = (page) => {
        setCurrentPage (page);
    }

    useEffect(() =>{
        console.log ( currentPage * rangePages);
        console.log ((currentPage * rangePages) + rangePages);
        for (let index = currentPage * rangePages; index < (currentPage * rangePages) + rangePages; index++){
            console.log(fullList[index]);
        }

    }, [,currentPage]);

    return (
        <>
        {
            //Calculate init index (it depends ont the current page) to show the questions, and the number of elements to show (its rangePages)
            fullList.slice(currentPage * rangePages, (currentPage * rangePages) + rangePages).map((current) => (
                <React.Fragment key={current.key}>
                {current}
                </React.Fragment>
            ))
        }
        <nav>
            <ul className="pagination">
                {
                    (() => {
                        //Draw pages numbers.
                        let valD = fullList.length;
                        let totalPages = valD / rangePages;
                        if (valD%rangePages !=0) totalPages += 1;
                        const retArray = [];
                        retArray.push(<li key={"\"init\""} className="page-item"><a className="page-link" aria-label="Previous" href="#"><span aria-hidden="true">«</span></a></li>);
                        if (valD%rangePages !=0) totalPages += 1;
                        for (let index = 0; index < totalPages; index ++){                            
                            retArray.push(
                                <li key={index} className="page-item"><a className="page-link" href="#" onClick={() => changePage(index)}>{index}</a></li>                                
                            );
                        }
                        retArray.push(<li key={"\"end\""} className="page-item"><a className="page-link" aria-label="Next" href="#"><span aria-hidden="true">»</span></a></li>);
                        return retArray;
                        
                    }                    
                    )()
                }
            </ul>
        </nav>
        </>
    )

}

const ElementoPaginacion = ({element}) =>{
    return(
        element
    )
}

正如您所看到的，我在启动组件时创建了（我只在加载Pagination组件时使用useEffect，因为如果不这样做，我就无法为传递的每个元素分配键），一旦完成此操作，每当页面发生更改时，就会执行代码片段：

{
            //Calculate init index (it depends ont the current page) to show the questions, and the number of elements to show (its rangePages)
            fullList.slice(currentPage * rangePages, (currentPage * rangePages) + rangePages).map((current) => (
                <React.Fragment key={current.key}>
                {current}
                </React.Fragment>
            ))
        }

通过一个简单的计算，正确地绘制元素，并使用它们的复选框。问题是在更改页面时。我附上了一些计算过的截图，所以你可以看到失败：
1.我在第0页，显示第一个问题。
1.我选择了一些答案。
1.我转到下一页，第1页，该页上的问题正确加载。
1.我尝试返回到上一页（0），但我标记的结果不见了！！！我在传递页面之前标记的框在哪里？
x1c 0d1xx 1c 1d 1xx 1c 2d 1xx 1c 3d 1x我做错了什么？当有人选中复选框时，我应该手动设置选项吗？为什么不保存在HTML中？

更改页面后，使用bootstrap + React列出和分页的HTML元素值不会保存,React + Bootstrap

1条答案

相关问题

热门标签

最新问答