Saludos
He creado una búsqueda y cada vez que el usuario escribe una palabra, muestra nuevas casillas de verificación, pero las nuevas casillas de verificación no funcionan como antes. , pero en los antiguos, hasta que la búsqueda muestre esto, están funcionando normalmente
//search in checkbox data const checkOptions = (container, value, containerId) => { for (let i = 0; i < props.unique[containerId].length; i++) { let item = props.unique[containerId][i]; if ( props.unique[containerId][i] !== null && props.unique[containerId][i].includes(value) ) { element = ( <label onClick={(e) => {e.stopPropagation(); ifAnyChecked(e);}} key={i}> <input onClick={(e) => {tableSearch(e);}} type="checkbox" value={item ? item : "empty"}/> {item && item.length > 28 ? ( handleCheckbox(item) ) : ( <p>{item}</p> )} </label> ); tempData += ReactDOMServer.renderToString(element); } } container.innerHTML = tempData; };¿Alguna idea de lo que está pasando?
¿Has intentado usar el evento onChange en lugar de onClick ? Hasta donde yo sé, la casilla de verificación de tipo de entrada no tiene un evento como onClick .
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
Solía tener este problema cuando estaba trabajando con Vanilla JS cada vez que renderizaba un nuevo elemento, entonces ese elemento no activaba mis eventos. Eso se debió a que se generaron en tiempo de ejecución, por lo que el evento no estaba vinculado a ese elemento. Ahora creo que eso también está pasando aquí. Así que cambié su código y lo puse dentro de un estado ahora está funcionando. Espero haber ayudado. Avíseme si esta no es la solución que estaba buscando, pero resuelve su problema.
Puse el html dentro de una matriz de estado y luego lo mapeé dentro del div newCheckBox . Cambié la entrada a entrada controlada con estado fieldValue . Por último, cambié la nueva alerta de casilla de verificación de onClick={alert("doesn't goes in")} a onClick={() => alert("I think its working now right?")}
Aquí está el sandbox de código completo https://codesandbox.io/s/polished-sea-vedvh?file=/src/App.js