处理多个按钮 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