根据select或unselect标签递增和递减计数器

Question

我正在使用下一个 js 来处理问题表单，我有多个问题有多个答案，用户可能 select 一个问题的一个或多个标签。如果一个用户 select 一个或多个 tag 回答一个问题，它必须 increment counter 一次，如果一个用户 unselect tag 它不能 decrement 直到 unselect 相关问题的最后一个标签。

1 - 当用户 select 的问题标签首先增加计数器时，但当我 select 同一个问题中的第二个标签时它不能增加。

2 - 当用户 unselects 问题标签时，如果其中任何一个被 selected，它不得递减，直到最后一个被 unselected.

现在，当 select 第一个标签时，它会递增计数器，但之后，如果我 select 或 unselect，它不会递减或递增。

请帮我处理一下。

我的代码：

<TageQuestion
     key={item.attributes.Number}
     id={item.attributes.Number}
     data={item}
     name={`${item.attributes.Number}`}
     errors={errors}
     touched={touched}
     handleSelectOption={handleSelectOption}
/>

组件：

<div className="mt-3">
     {Object.keys(attributes.options).map(item => (
       <div className="inline" key={item}>
         <input
           {...feild}
           {...props}
           className="hidden"
           id={item}
           value={item}
           type="checkbox"
           name={`${name}[answer]`}
         />
         <label
           htmlFor={item}
           id={item + "lable"}
           onClick={e => {
             selectTage(e.target);
             handleSelectOption(`question${id}`, item);
           }}
           className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 mr-3 mb-2 cursor-pointer"
         >
           {item}
         </label>
       </div>
     ))}
   </div>

函数：

function handleSelectOption(title, item) {
     setCompareTagTitle(title);

     if (title !== compareTagTitle) {
       setTagItem([...tagItem, item]);
       setCounter(++counter);
     } else if (title === compareTagTitle) {
       setCounter(counter);
     } else {
       setCounter(--counter);
     }
}

来自后端的数据：

Answer 1

我们应该首先在子组件中考虑 2 个步骤 TagQuestions 然后在父组件中 [type].js

第一步：

//TagQuestions.js
const [intialRender, setIntialRender] = useState(true);
// if component render for first time
const selectTag = (e) => {
// we should change intialRender to false to say that user select somthing
....
   if (tage.length > 0) {
  const isExit = tage.filter((item) => item.name === el.innerHTML);
  if (isExit.length === 0) {
    setTage([...tage, { name: el.innerHTML }]);
    if (intialRender) {
      setIntialRender(false);
    }
  }
} else {
  setTage([...tage, { name: el.innerHTML }]);
  if (intialRender) {
    setIntialRender(false);
  }
}
....
}
//use effect function to if user unselect all tags after selctions
useEffect(() => {
if (tage.length === 0 && !intialRender) {
   //call parent function and set empty param to true.
   handleSelectOption(`question${id}`, "", true);
 }
}, [tage]);

step2（父组件）：

const [compareTagTitle, setCompareTagTitle] = useState([]);
 function handleSelectOption(title, item, empty = false) {
if (empty) {
      const filter = compareTagTitle.filter(
    (value) => value.toString() !== title.toString()
  )
  setCompareTagTitle(filter);
  setCounter(--counter);
} else {
  if (!compareTagTitle.includes(title)) {
    setCompareTagTitle([...compareTagTitle, title]);
    setCounter(++counter);
  }
  }
}

根据select或unselect标签递增和递减计数器

Increment and decrement counter according to select or unselect tag

javascript

reactjs

next.js