Tengo un componente en SolidJS que se parece a esto:
const MyComponent: Component = (params) => { // ... const [votes, setVotes] = createSignal(new Set()); const toggle = (val: string) => { if (votes().has(val)) { let _votes = votes(); _votes.delete(val); setVotes(_votes); } else { let _votes = votes(); _votes.add(val); setVotes(_votes); } } return <> <For each={someArray()}>{(opt, i) => <button style={{ color: `${ votes().has(opt) ? "blue" : "black"}` }} onClick={() => { toggle(opt) } } > {opt()} </button> }</For> </> } Lo que quiero que suceda es que el estilo del botón cambie, en función de si ( opt en el bucle for) está presente en el conjunto de votes .
Sin embargo, este código no funciona. No se actualiza cuando se actualizan los votos.
La variable de votos se actualiza como se esperaba.
Cuando le doy a los votos un valor inicial, se muestra el estilo correcto (pero no se actualiza después).
¿Hay alguna solución para que esto funcione?
Lo que dijo @Nick parece ser correcto, intente cambiar su método de toggle a:
const toggle = (val: string) => { const _votes = votes(); _votes.has(val) ? _votes.delete(val) : _votes.add(val); setVotes(new Set(_votes)); }Hay un Set primitivo reactivo en @solid-primitives/set que puede usar directamente como estado sin createSignal . Esto podría simplificarle las cosas.
Actualmente hay dos formas de definir un atributo de estilo en línea en un elemento:
Puede usar una operación ternaria u otras expresiones condicionales para crear un valor condicionalmente.
const App = () => { const [cond, setCond] = createSignal(true); const toggle = () => setCond(c => !c); return ( <div onclick={toggle}> <span>conditon: {cond() ? 'true' : 'false'}</span> {` `} <span style={{ 'background-color': cond() ? 'red' : 'blue', color: 'white' }} > Using Object </span> {` `} <span style={`background-color: ${cond() ? 'red' : 'blue'}; color: white;`} > Using String </span> </div> ); }; render(App, document.querySelector('#app'));NOTA: La pregunta ya está respondida, pero hagamos que sea una prueba futura al proporcionar una respuesta general.