如何使用 React Js 中的下拉列表對數據進行排序？

Question

我在 App.js 中有兩個功能組件 Dropdown、DisplayData 和導入。 我需要根據下拉列表和 DisplayData 中的選擇對記錄進行排序。

下拉框.jsx

const DropDown = ()=>{
return (
    <>
    <select>
        <option value="lowtohigh">Age: Low to High </option>
        <option value="hightolow">Age: High to Low </option>
    </select>
    </>
)}
export default DropDown;

顯示數據.jsx

const DisplayData = ()=> {

const record = [
    {
        SR : 1,
        Name : 'Aakash',
        Age : 25
    },
    {
        SR : 4,
        Name : 'Zahir',
        Age : 32
    },
    {
        SR : 3,
        Name : 'Mohan',
        Age : 23
    },
    {
        SR : 2,
        Name : 'Parul',
        Age : 42
    },
    {
        SR : 9,
        Name : 'Himanshu',
        Age : 18
    },
];

return (
    <>
    <table>
        {record.map((rec,index)=>{
            return (
    
    <tr key={index}>
    <td>
     {rec.SR}
    </td>
    <td>
    {rec.Name}
    </td>
    <td>
   {rec.Age}
    </td>
</tr>
            )}) }
       
    </table>
    </>
 )}

export default DisplayData;

應用程序.js

function App() {
return (
<div className="App">
    <DropDown />
    <DisplayData/>
</div>
);}

export default App;

如何將 prop 從 Dropdown 傳遞到 DisplayData？ 還是有其他方法。 我想將 DropDown 和 DisplayData 保留在單獨的組件中。

Answer 1

1. 創建一些狀態來保存App.js中的排序標准

   const [sortDir, setSortDir] = useState("lowtohigh");

2. 允許DropDown接受狀態設置器作為道具

   const DropDown = ({ setSortDir }) => ( <select onChange={(e) => setSortDir(e.target.value)}> <option value="lowtohigh">Age: Low to High</option> <option value="hightolow">Age: High to Low</option> </select> );

3. 允許DisplayData接受排序標准並創建一個備忘錄掛鈎以生成排序結果

   const record = [ /*...*/ ]; const DisplayData = ({ sortDir }) => { const sortedRecords = useMemo( () => [...record].sort((a, b) => { return sortDir === "lowtohigh"? a.Age - b.Age: b.Age - a.Age; }), [sortDir] ); return ( <table> {sortedRecords.map((rec) => ( <tr key={rec.SR}>{/* etc */}</tr> ))} </table> ); };

4. 將 props 傳遞給組件

   return ( <div className="App"> <DropDown setSortDir={setSortDir} /> <DisplayData sortDir={sortDir} /> </div> );