Así que tengo este componente donde tengo alrededor de 15 casillas de verificación de tipo de entrada, que al marcar/desmarcar mostrar/ocultar imágenes. Todos los campos tienen un controlador onChange que toma el nombre de categoría de las imágenes. Luego, el tipo de categoría se verifica en un condicional y llama a otra función auxiliar. Todos ellos siguen los mismos pasos.
Ahora estoy tratando de adjuntar un estado local a cada una de las casillas de verificación (las 15) para que cuando una de ellas esté marcada muestre la imagen de la categoría respectiva y cuando no esté marcada oculte la imagen.
Ahora mismo está funcionando pero a la inversa. Quiero decir, cuando está marcada, oculta la imagen y la muestra cuando no está marcada. Además, al hacer clic por primera vez en la casilla de verificación, no hay respuesta (ni ocultar ni mostrar).
Aquí está el componente. En aras de la simplicidad, solo muestro 3 campos. Pero hay alrededor de 15:
const Images= () => { const [ isNatureChecked, setIsNatureChecked ] = useState( false ); const [ isCityChecked, setIsCityChecked ] = useState( false ); const [ isAbstractChecked, setIsAbstractChecked ] = useState( false ); const handleImages = ( e, type ) => { if ( type === 'nature' ) { setIsNatureChecked( !isNatureChecked ); showImage( 0, isNatureChecked && new Image.Nature() ); } else if ( type === 'city' ) { setIsCityChecked( !isCityChecked ); showImage( 1, isCityChecked && new Image.City() ); } else if ( type === 'abstract' ) { setIsAbstractChecked( !isAbstractChecked); showImage( 2, isAbstractChecked && new Image.Abstract() ); } } return ( <div> <input type="checkbox" checked={isNatureChecked} onChange={( e ) => handleImages( e, 'nature' )} /> <input type="checkbox" checked={isCityChecked} onClick={( e ) => handleImages( e, 'city' )} /> <input type="checkbox" checked={isAbstractChecked} onClick={( e ) => handleImages( e, 'abstract' )} /> </div> ) } El primer parámetro en la función showImage es el índice.
¿Cómo puedo hacer que la casilla de verificación funcione correctamente? Quiero decir, cuando se marcará, mostrará una imagen, y cuando se desmarcará, la ocultará.
Además, sugiera si este código se puede refactorizar. 15 campos de entrada tendrán 15 estados y 15 condicionales. Eso es demasiado código repetitivo que quiero evitar. Así que por favor sugiérame la forma correcta.
su función handleImages no tiene un valor actualizado, por lo que no ve un cambio en el primer clic. Debe usar el gancho useEffect para mostrar la imagen dinámicamente y establecer el valor del estado como una dependencia.
Una mejor manera de abordar esto sería crear un estado de objeto, por ejemplo.
const [checkedImages, setCheckedImages] = useState({ nature: false, city: false, abstract: false });y luego su controlador puede cambiar los estados booleanos sin ninguna otra condición.
const handleChange = (e, type) => { setCheckedImages(prevState => ({...prevState, [type]: !checkedImages[type]})) }necesitará un bloque useEffect para mostrar imágenes dinámicamente
por último, los campos de entrada se pueden mapear sin tener que escribirlos uno por uno
Prueba esto
const Images= () => { const [imagesArr,setImagesArr] = useState([{name:'Nature',isChecked:false,index:0},{name:'City',isChecked:false,index:1},{name:'Substract',isChecked:false,index:2},]) const handleImages = ( e, imageData,imageDataIndex ) => { setImagesArr(arr=>{ let arr2 = [...arr] arr2[imageDataIndex] = {...arr2[imageDataIndex],isChecked:e.target.checked} return arr2 }); showImage( imageData.index, e.target.checked && new Image[imageData.name]() ); } return ( <div> { imagesArr && imagesArr.length && imagesArr.map((data,index)=>{ return ( <input type="checkbox" checked={data.isChecked} onChange={( e ) => handleImages( e, data,index )} /> ) } } </div> ) }