Estoy tratando de cambiar el color de cada div onClick. El problema en mi código es que todos los divs cambian de color cuando se hace clic en uno. Buscando una manera de cambiar el color de cada uno individualmente
Aquí está mi código:
class Main extends React.PureComponent { state = { color: 'blue', }; onChange = () => { this.setState({color: 'red'}); }; render() { return ( <Box sx={SX.root}> <Box sx={SX.page}> <Box sx={SX.shapeContainer}> <div style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}} onClick={this.onChange} /> <div style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}} onClick={this.onChange} /> </Box> <MathGrid sx={SX.math1} /> </Box> <Box sx={SX.header} /> <Box sx={SX.footer} /> </Box> ); }Debe crear un componente separado para cada div con color cambiable. De esta forma, cada componente tendrá su propio estado gestionado de forma independiente. En su ejemplo, comparte el mismo estado de color que el resto.
BoxComponent
class BoxComponent extends React.Component { state = { color: "blue", }; onChange = () => { this.setState({ color: "red" }); }; render() { return ( <div style={{ backgroundColor: this.state.color, width: 20, height: 20, opacity: "50%" }} onClick={this.onChange} /> ); } } MainComponent
class Main extends React.PureComponent { render() { return ( <Box sx={SX.root}> <Box sx={SX.page}> <Box sx={SX.shapeContainer}> <BoxComponent /> <BoxComponent /> </Box> <MathGrid sx={SX.math1} /> </Box> <Box sx={SX.header} /> <Box sx={SX.footer} /> </Box> ); } }Ambos divs están usando el valor de estado "color". Necesitará usar dos elementos de estado separados para administrar el color de estos dos divs de forma independiente.
También deberá agregar otro controlador onChange o modificar el existente para aceptar un color como argumento.
Está utilizando el mismo estado para ambos cuadros, por lo que cuando cambia su estado, cambiará en todo el componente. Deberá crear estados separados para cada componente. o cree un componente separado para la caja
<div style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}} onClick={this.onChange} /> <div style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}} onClick={this.onChange} />