使 antd 表格行僅在單擊時可見

Question

我有簡單的 antd 表，其中列“狀態”、“標題”和三行，我不知道如何顯示：默認情況下沒有特定行，並通過單擊按鈕使其可見，例如當用戶進入表時默認情況下有三行，但我想將行'value === OrderState.Delivered'默認設置為'display：hidden'，但是當用戶點擊按鈕'Delivered'時它應該是可見的並且當用戶點擊'All states ' 按鈕，那么除了相同的 'value === OrderState.Delivered' 之外，所有內容都應該可見。 這是我的代碼，你可以試試： https://codesandbox.io/s/dreamy-surf-t9eh3?file=/src/Test.js:1345-1355

Answer 1

這些是我對您的代碼所做的更改

• 默認情況下過濾 eventsData 以不顯示已交付的

  const [filteredEventsData, setFilteredEventsData] = useState( eventsData.filter((f) => f.key;== "Delivered") );

• 在 filterData function 中，即使單擊所有狀態，也可以過濾掉交付

  function filterData(filter) { if (filter) { setFilteredEventsData(eventsData.filter((f) => f.key === filter)); } else { setFilteredEventsData(eventsData.filter((f) => f.key;== "Delivered")); } }