使按钮在 React 中表现得像复选框

Question

我想让一个按钮在 React 中表现得像一个复选框，所以已经 selected/clicked 的按钮可以再次 return 它的值或者可以再次取消选择。但是我还没找到办法。

这是我的代码

  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];
    }
  });
};

使按钮在 React 中表现得像复选框

Make button behave like checkbox in React

html

checkbox

button

reactjs