0
142
ViewsCambiar el estilo a elementos individuales React-Hooks
Quiero crear un botón que cuando haces clic abra una barra de navegación con diferentes colores que cuando el usuario presiona uno de los colores, la barra de navegación se cierra y el botón toma el color en el que el usuario hizo clic.
mi código funciona, pero tengo resultados diferentes a los que esperaba
este es el resultado 
los puntos verdes cambiaron todos a la vez, quiero que solo el punto en el elemento en el que hice clic cambie de color
este es el codigo
const colorLevelArr = ["rgb(236, 77, 77)", "rgb(241, 153, 70)", "rgb(255, 253, 151)", "rgb(147, 241, 135)","rgb(132, 220, 255)"]; const [colorLevel, setColorLevel] = useState([]); const [colorLevelOpen, setcolorLevelOpen] = useState(null); const toggelColorLevel = (item) => { setcolorLevelOpen(preOpen => preOpen === item ? null : item) } const changeColorLevel = (index, item) => { setColorLevel(colorLevelArr[index]) setcolorLevelOpen(preOpen => preOpen === item ? null : item) }y este es el codigo del boton
<button className="color_level_container" onClick={() => toggelColorLevel(item)} style={{ backgroundColor:`${colorLevel}`, }}> {colorLevelOpen === item && ( <div className="color_btn_container"> {colorLevelArr.map((colorLevel, index)=>{ return ( <div onClick={()=>{ toggelColorLevel(item) changeColorLevel(index, item) } } style={{ borderRadius:"100%", border:"1px solid black", width:"15px", height:"15px", backgroundColor:`${colorLevel}`, }}> </div> ) })} </div> )} </button>si alguien me puede ayudar a entender cómo hacerlo bien,
y que el unico cambio de color sera en el articulo que presione
Gracias de antemano
1 answers
Answer question0
parece que está usando un estado para el color y lo usa para todos los elementos. la forma más sencilla de solucionarlo será creando un estado diferente para cada botón, y así, cada uno tendrá su propio color. esto se puede hacer creando un componente para el botón que contiene el estado del color, y cuando el estado cambia, el color del componente actual cambiará en consecuencia y no afectará a los otros componentes del botón.
Escribí un pequeño ejemplo solo para que entiendas la idea:
const colorsList = ['red', 'yellow', 'blue', 'green']; const App = () => { return ( <div style={{ margin: '100px' }}> <ChangingColorButton /> <ChangingColorButton /> <ChangingColorButton /> <ChangingColorButton /> </div> ); }; const ChangingColorButton = () => { const [color, setColor] = useState('black'); return ( <button onClick={() => setColor(colorsList[Math.floor(Math.random() * 3) + 1])} style={{ backgroundColor: color, marginRight: '8px' }}> Click to change color </button> ); };como puede ver, tengo una lista de colores y al hacer clic en cada botón, su color de fondo cambia a un color aleatorio de la lista.
Este ejemplo demuestra cómo puede controlar cada color para cada botón por separado.