處理多個按鈕 onClick 事件反應

Question

我有一個帶有按鈕名稱的數組。 我通過它們 map 並渲染它們。 我想添加一個可以處理它們的onClick事件。 這些按鈕是過濾器，因此 onClick 事件應該觸發過濾器 function，但我還想更改樣式，以顯示現在單擊的過濾器。

這就是我現在所擁有的：

[-] 按鈕列表

const STATUS = ['All procurements', 'Draft', 'Running', 'Completed'];

[-] 映射和樣式

{STATUS.map(status => (
  <button
     className={`flex w-full btn justify-between hover:bg-primary-300 mb-2 cursor-pointer ${
               isActiveFilter ? 'hover:bg-primary-500 bg-primary-400' : '' }` }
     key={status}
     onClick={handleFilterClick}
     value={status.toLowerCase()}
   >
         {status}
         {isActiveFilter && <UilCheck />}
   </button>
 ))}

[-] 和handleFilterClick function：

const [isActiveFilter, setIsActiveFilter] = React.useState(false);

function handleFilterClick(e: React.MouseEvent<HTMLButtonElement>) {
  setFilterStatus(e.currentTarget.value as FilterStatus);
  setIsActiveFilter(true);
}

現在，當我單擊一個按鈕時，這就是我得到的：

但理想情況下，我只想讓點擊的按鈕處於活動狀態。 那么我錯過了什么？

Answer 1

我認為您的程序是正確的，只是您必須添加一些想法：

const STATUS = ['All procurements', 'Draft', 'Running', 'Completed'];
const [isActiveFilter, setIsActiveFilter] = React.useState(''); // string which one is active

function handleFilterClick(v) {
  setIsActiveFilter(v);
}

{STATUS.map(status => (
  <button
     className={`flex w-full btn justify-between hover:bg-primary-300 mb-2 
cursor-pointer ${
               isActiveFilter === status  ? 'hover:bg-primary-500 bg-primary-400' : '' }` }
     key={status}
     onClick={handleFilterClick(status)}
     
   >
         {status}
         {status === isActiveFilter && <UilCheck />}
   </button>
 ))}

基於 isActiveFilter 值，您也可以添加活動 class