0
264
ViewsIncrementa y decrementa el contador de acuerdo con la etiqueta seleccionada o deseleccionada
Estoy trabajando con el siguiente js para manejar un formulario de pregunta, tengo varias preguntas que tienen varias respuestas y el usuario puede seleccionar una o varias etiquetas para una pregunta. si un usuario selecciona una o más tag para responder una pregunta, debe increment el counter solo una vez, si un usuario deselecciona una tag , no debe decrement hasta deseleccionar la última etiqueta de la pregunta relacionada.
1 - Cuando el usuario selecciona una etiqueta de una pregunta primero incrementa el contador, pero no debe incrementarse cuando seleccione la segunda etiqueta en la misma pregunta.
2 - Cuando el usuario deselecciona las etiquetas de pregunta no debe decrecer si alguna de ellas está seleccionada no debe decrementar hasta que se deseleccione la última.
Ahora, al seleccionar la primera etiqueta, incrementa el contador, pero después de eso, si selecciono o deselecciono, no disminuye ni incrementa.
Por favor, ayúdame a manejar esto.
Mi código:
<TageQuestion key={item.attributes.Number} id={item.attributes.Number} data={item} name={`${item.attributes.Number}`} errors={errors} touched={touched} handleSelectOption={handleSelectOption} />El componente:
<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>La función:
function handleSelectOption(title, item) { setCompareTagTitle(title); if (title !== compareTagTitle) { setTagItem([...tagItem, item]); setCounter(++counter); } else if (title === compareTagTitle) { setCounter(counter); } else { setCounter(--counter); } } Datos que provienen del backend: 
1 answers
Answer question0
debemos considerar 2 pasos primero en el componente secundario TagQuestions y luego en el componente principal [type].js
paso 1:
//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]);paso 2 (componente principal):
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); } } }