保存点击的列 header

Question

我真的是 reactJS 的新手。我有一个包含两列的 table。这是我的代码：

import React, { useState, useEffect } from 'react'
import { getUsers } from '../../services/userService'
import { useNavigate } from 'react-router-dom'
import Pagination from '@mui/material/Pagination'

const Table = () => {

    const navigate = useNavigate()
    
    const [users, setUsers] = useState([]);
    const [currentUsers, setCurrentUsers] = useState([]);
    const [search, setSearch] = useState('');
    const [isSorted, setIsSorted] = useState(false);
    const [valueHeader, setValueHeader] = useState({title: "",body: ""}); //Value header state
    const [sortedUsers, setSortedUsers] = useState([]);

    const pageItemCount = 15
    const [pageCount, setPageCount] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)

    useEffect(async () => {
        try {
            const response = await getUsers(search);
            setUsers(response.data.users);
            setPageCount(Math.ceil(response.data.users.length / pageItemCount))
            setCurrentUsers(response.data.users.slice(0, pageItemCount))
        } catch (error) { }
    }, [search]);

    const sortFn = (userA, userB) => {
        // sort logic here, it can be whatever is needed
        // sorting alphabetically by `first_name` in this case
        return userA[valueHeader.body].localeCompare(userB[valueHeader.body]) //<== Use value of culumn header
      }
      
      useEffect(() => {
          if (isSorted) {
            setSortedUsers(currentUsers.slice().sort(sortFn))
          } else {
            setSortedUsers(currentUsers)
          }
        }, [isSorted, currentUsers, valueHeader]) //<== add valueHeader to dependency
      
      const toggleSort = ({target}) => {
        
        setIsSorted(!isSorted)
        setValueHeader({
          title: target.value,
          body: target.value === "name" ? "first_name" : "mobile"
        }) //<=== set state of value header
      }

    const changePage = (i) => {
        setCurrentPage(i)
        const startItem = ((i - 1) * pageItemCount) + 1
        setCurrentUsers(users.slice(startItem - 1, (pageItemCount * i)))
    }

    const handleChange = (event, value) => {
        changePage(value);
    }
        
            return (
                <div dir='rtl' className='bg-background mt-10 px-5 rd1200:px-30 overflow-auto'>
                   
                    <table className='w-full border-separate rounded-md'>
                        <thead>
                            <tr className='bg-text-secondary text-white shadow-sm text-center'>
                                <th className='p-2' onClick={(e) => toggleSort()}>name</th>
                                <th className='p-2' onClick={(e) => toggleSort()}>mobile</th>
                            </tr>
                        </thead>
                        <tbody>
                            {sortedUsers.map((item, index) =>
                                <tr key={item.id} className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}>
                                    <td className='text-text text-sm p-2'>{item.first_name}</td>
                                    <td className='text-text text-sm p-2'>{item.mobile_number}</td> 
                                </tr>
                            )}
                        </tbody>
                    </table>
                    <Pagination className="mt-2 pb-20" dir='ltr' page={currentPage} count={pageCount} onChange={handleChange} variant="outlined" shape="rounded" />
                </div>
            )
        }
        
        export default Table

我想根据点击的栏目做出决定header。例如，如果单击 name 列 header，我想在 useFunc 中使用 first_name 的值，如果 mobile 列 header 是单击，我想在 useFunc.

中使用 mobile_number 值

那么我如何保存选择了哪一列 header 并在我的代码的其他部分使用它，例如在 useFunc 中？

Answer 1

解决方案

将 header 列的 value 传递给 state，然后将其用于代码的一部分并将 valueHeader 添加到 useEffect dependency用户排序如下：

import React, { useState, useEffect } from 'react'
import { getUsers } from '../../services/userService'

const Table = () => {

    const [users, setUsers] = useState([]);
    const [currentUsers, setCurrentUsers] = useState([]);
    const [isSorted, setIsSorted] = useState(false);
    const [valueHeader, setValueHeader] = useState({title: "",body: ""}); //Value header state
    const [sortedUsers, setSortedUsers] = useState([]);


    useEffect(async () => {
    try {
        const response = await getUsers(search);
        setUsers(response.data.users);
    } catch (error) { }
}, [search]);

const sortFn = (userA, userB) => {
  // sort logic here, it can be whatever is needed
  // sorting alphabetically by `first_name` in this case
  return userA[valueHeader.body].localeCompare(userB[valueHeader.body]) //<== Use value of culumn header
}

useEffect(() => {
    if (isSorted) {
      setSortedUsers(currentUsers.slice().sort(sortFn(userA, userB)))
    } else {
      setSortedUsers(currentUsers)
    }
  }, [isSorted, currentUsers, valueHeader, sortFn(userA, userB)]) //<== add valueHeader add sortFn(userA, userB) to dependency

const toggleSort = ({target}) => {
  setIsSorted(!isSorted)
  if(target.value){
    setValueHeader({
    title: target.value,
    body: target.value == "name" ? "first_name" : "mobile_number"
  }) //<=== set state of value header
 }
}

const useFunc = () => {
  //I want to decide based on the selected column header
}

    return (
        <div dir='rtl' className='bg-background mt-10 px-5 rd1200:px-30 overflow-auto'>
           
            <table className='w-full border-separate rounded-md'>
                <thead>
                    <tr className='bg-text-secondary text-white shadow-sm text-center'>
                        <th className='p-2' onClick={toggleSort}>name</th>
                        <th className='p-2' onClick={toggleSort}>mobile</th>
                    </tr>
                </thead>
                <tbody>
                    {sortedUsers.map((item, index) =>
                        <tr key={item.id} className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}>
                            <td className='text-text text-sm p-2'>{item.first_name}</td>
                            <td className='text-text text-sm p-2'>{item.mobile_number}</td> 
                        </tr>
                    )}
                </tbody>
            </table>
            
        </div>
    )
}

export default Table

Answer 2

如果您只需要值，则将值直接传递给函数更简单和安全

import React, { useState, useEffect } from 'react'
    import { getUsers } from '../../services/userService'
    
    const Table = () => {
    
        const [users, setUsers] = useState([]);
        const [currentUsers, setCurrentUsers] = useState([]);
        const [isSorted, setIsSorted] = useState(false);
        const [sortedUsers, setSortedUsers] = useState([]);
    
    
        useEffect(async () => {
        try {
            const response = await getUsers(search);
            setUsers(response.data.users);
        } catch (error) { }
    }, [search]);
    
    const sortFn = (userA, userB) => {
      // sort logic here, it can be whatever is needed
      // sorting alphabetically by `first_name` in this case
      return userA.first_name.localeCompare(userB.first_name)
    }
    
useEffect(() => {
        if (isSorted) {
          setSortedUsers(currentUsers.slice().sort(sortFn))
        } else {
          setSortedUsers(currentUsers)
        }
      }, [isSorted, currentUsers])

    const toggleSort = () => {
      setIsSorted(!isSorted)
    }

    const useFunc = () => {
      //I want to decide based on the selected column header
    }
    
        return (
            <div dir='rtl' className='bg-background mt-10 px-5 rd1200:px-30 overflow-auto'>
               
                <table className='w-full border-separate rounded-md'>
                    <thead>
                        <tr className='bg-text-secondary text-white shadow-sm text-center'>
                            <th className='p-2' onClick={(e) => toggleSort("name")}>name</th>
                            <th className='p-2' onClick={(e) => toggleSort("mobile")}>mobile</th>
                        </tr>
                    </thead>
                    <tbody>
                        {sortedUsers.map((item, index) =>
                            <tr key={item.id} className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}>
                                <td className='text-text text-sm p-2'>{item.first_name}</td>
                                <td className='text-text text-sm p-2'>{item.mobile_number}</td> 
                            </tr>
                        )}
                    </tbody>
                </table>
                
            </div>
        )
    }
    
    export default Table

保存点击的列 header

Save the column header that is clicked on

html-table

reactjs