SolidJS中有一个组件如下所示:

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>
  </>
}

我想做的是,按钮的样式将根据votes组中是否存在按钮(for循环中为opt)而改变.

但是,此代码不起作用.更新投票时不会更新.

投票变量确实按预期更新.

当我给投票设置一个初始值时,会显示正确的样式(但之后不会更新).

有什么解决办法可以让这一切顺利进行吗?

推荐答案

@solid-primitives/set中有一个react Set原语,可以直接用作状态,而无需createSignal.这可能会简化您的工作.

Javascript相关问答推荐

在执行异步导入之前判断模块是否已导入()

如何迭代叔父元素的子HTML元素

在Java中寻找三次Bezier曲线上的点及其Angular

环境值在.js文件/Next.js中不起作用

覆盖加载器页面避免对页面上的元素进行操作

Nextjs 13.4 Next-Auth 4.2登录(&Quot;凭据&,{});不工作

在不删除代码的情况下禁用Java弹出功能WordPress

使用类型:assets资源 /资源&时,webpack的配置对象&无效

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

使用Document.Evaluate() Select 一个包含撇号的HTML元素

Docent.cloneNode(TRUE)不克隆用户输入

如何在Java脚本中对数据进行签名,并在PHP中验证签名?

在Java脚本中录制视频后看不到曲目

如果我的列有条件,我如何呈现图标?

计算对象数组中属性的滚动增量

React数组查找不读取变量

Played link-Initialize.js永远显示加载符号

如何在不将整个文件加载到内存的情况下,在Node.js中实现Unix粘贴命令?

使用jQuery将表中的数据插入到文本区域

无法将bson类型转换为日期MongoDB