reactjs - React Material-UI Select for Jumping to Page on Table not working - Stack Overflow

admin管理员组

文章数量:1391947

I am adding a component which has a material-ui select (or dropdown) where a user a can jump to a page on pagination table or a table that has lots of rows, but only shows 20 rows at a time.

Now the component renders and it shows a drop down list of pages, but if you select page, the table doesn't change, and for the sake of me, I don't know why.

The below is the relevent bit my code for the Select component:

export const SelectaPage={{ pages, currentPage, onPageChange}}=>{

  const handleChange =(event)=>{
     onPageChange(event.target.value);
  };

  return(
    <FormControl variant="outlined" fullWidth>
      <Select
        labelId="DropDown"
        value={currentPage}
        onChange={handleChange}>
          {Array.from({length:pages}, (_,index)=>(
            <MenuItem key={index+1} value={index+1}>
              Page {index+1}
            </MenuItem>
          ))}
      </Select>
    </FormControl>
  );
}

On the component where the above is used it is like this:

 const [currentPage, setCurrentPage] = useState(1)
 const pages = Math.ceil(data.length/pageSize //this is the number of rows per page to be shown

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

const pagedData = data.slice((Number(currentPage)-1*pageSize,  Number(currentPage)*pageSize);
 .......
  <TableBody {...getTableBodyProps()}>
      {
        pagedData.map(row=>{
          return (
            <TableRow row{row}
              prepareRow=(prepareRow}
              />
          );
        })
      }
    ....

The component for the dropdown is

<SelectPage
  pages={pages}
  currentPage={currentPage}
  onPageChange={handlePageChange}
  />

Can someone please direct on how to fix this?

本文标签： reactjsReact MaterialUI Select for Jumping to Page on Table not workingStack Overflow