1

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

introducir la descripción de la imagen aquí

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;
2
  • y que has intentado????
    – user46896
    Commented el 17 oct. 2021 a las 19:27
  • necesitas establecer element.style.backgroundColor = "red"; al element actual .
    – user46896
    Commented el 17 oct. 2021 a las 19:29

1 respuesta 1

0

Para hacer lo que buscas, establece un estado donde guardes el color de cada grilla. Además, guarda también un estado que se dipare cuando el usuario presiona y levanta el click en tu grilla.

La lógica es la siguiente:

  1. Si el usuario tiene el click presionado, establece la variable mouseDown a true y colorea los elementos sobre los que ocurra un mouseOver en esa grilla con el color que te pasan por props.
  2. Si el usuario deja de presionar el botón de click, establece mouseDown a false y resetea la grilla a su estado inicial.

Te dejo un snippet que puedes ejecutar desde acá. Si no quieres resetear la grilla después de levantar el click, elimina la llamada a la función resetGrid() en la función handleMouseUp.

const {useState} = React;

function GridPrint (props){
let grid = [];
for(let i = 1; i<=100; i++)
  grid.push({id: i, color:'white'})
  
const [gridState, setGridState] = useState(grid);
const color = props.selectedColor;
const [mouseDown, setMouseDown] = useState(false) ;

const updateGrid = (event) =>{
  setGridState(prevState => {
      return prevState.map(element => {
        if(element.id === Number(event.target.name))
           element.color = color
        return element
      })
    })    
}

const resetGrid = () =>{
  setGridState(grid);
}

const  handleHover = (event) =>{
    if(!mouseDown) return 
    updateGrid(event)
} 

const handleMouseDown = (event) => {
  setMouseDown(true);
  updateGrid(event);
}

const handleMouseUp = () => {
  setMouseDown(false);
  resetGrid();
}

return(
    <div id="Grid" onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
            {gridState.map((element) => // pinta los 100 cuadros.         
                {   
                    return (
                    <button
                    className="square" 
                    name={element.id} 
                    key={element.id}
                    onMouseOver={handleHover} 
                    style={{background: element.color}}
                    > {element.id}                       
                    </button>
                )}
            )}    
        </div>
    )
}

ReactDOM.render(<GridPrint selectedColor="tomato" />, document.getElementById('root'));
#Grid{
  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: repeat(10, 40px);
}
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.