使按钮的行为类似于 React 中的复选框

Question

我想让一个按钮在 React 中表现得像一个复选框，这样被选择/点击的按钮可以再次返回它的值，也可以再次取消选择。但是我还没有找到方法。

这是我的代码

  const handleSelectedValue = (reason: any) => {
    setSelectedValues(item => [...item, reason]);
  };
  

  // if value selected then change style
  const checkId = (id: number) => {
    return selectedValues.map(item => item.id).includes(id);
  };

 // inside jsx
 {reasons.map(item => {
      return (
        <button
           key={item.id}
           className={`mr-2 mb-2 text-xs border-2 rounded-full font-semibold border-card-primary px-3 sm:px-5 py-2 ${checkId(item.id) ? 'text-white bg-base-primary opacity-75 border-none' : 'text-base-secondary'}`}
           onClick={() => handleSelectedValue(item)}
         >
            {item.reason}
         </button>
     );
 })}

此代码有效，但所选值不能取消选择。谢谢。

Answer 1

您必须检查数组中是否存在原因。如果存在，请将其删除，否则将其添加到列表中。你总是添加它。

const handleSelectedValue = (values) => {
  setSelectedValues((item) => {
    let idx = item.findIndex((itm) => itm.id === values.id);
    if (idx !== -1) {
      return item.filter(itm => itm.id !== values.id)
    } else {
      return [...item, values];
    }
  });
};