Busco hacer que quede asi (onClick y onMouseDown)
- se debe poder al hacer click y al manetener el click abajo
- el color lo obtengo de otro componente
function GridPrint (props){
const grid = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,
21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,
38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,
55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,
72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,
89,90,91,92,93,94,95,96,97,98,99,100];
const color = props.selectedColor;
const [num,setNum] = useState(0);
const handleClick = (event) =>{
setNum(event.target.name);
event.preventDefault();
}
return(
<div id="Grid">
Tabla de 10*10 compuesta de buttons
Quiero mantener el color del elemento seleccionado y que no cambie al hacer click en otro button, alguna idea?
<div id="GridRight">
{grid.map((element) => // pinta los 100 cuadros.
{
return (
<button
className="square"
name={element}
key={element}
onClick={handleClick}
style={{backgroundColor: parseInt(num)===parseInt(element) ? color : 'white'}} `Se aplica cuando el elemento en el areglo
>
</button>
)}
)}
</div>
</div>
);
}
export default GridPrint;
element.style.backgroundColor = "red";
al element actual .