微信小程序里关于checkbox的坑

需求背景

小程序项目内,需要添加一个checkbox,用来判断用户是否同意某种协议。

遇到的坑

我只打算使用一个checkbox,而非checkbox-group,最初给checkbox添加bindchange属性,却无任何反应。通过查看官网才知晓,checkbox只有bindtap,我又将bindtap函数里的事件参数打印出来,却发现没有一个字段能表示是否勾选。

官网上说checkbox添加checked属性值,我按照如下方式加了:

js 复制代码
<checkbox checked="{{ isChecked }}" />

Page({
  data: {
      isChecked: false,
  },
})

checkbox已经勾选了,isChecked的值却仍然是false,很明显,它不是响应式的。

万般无奈的解决办法

无奈之下,我只能使用checkbox-group,给它绑定bindchange事件,代码如下所示:

js 复制代码
<checkbox-group bindchange="handleChange">
    <checkbox value="{{ isChecked }}" />
</checkbox-group>

Page({
  data: {
      isChecked: false,
  },
  handleChange(e) {
    this.setData({
      isChecked: Boolean(e.detail.value[0]),
    });
  },
})

这种感觉,有点尴尬,就像你本来只准备用一把普通刀杀鸡,结果呢,别人非得让你用牛刀来杀,好生别扭!

相关推荐
七七powerful4 小时前
mac电脑安装cmca根证书
java·前端·macos
神探小白牙4 小时前
echarts环形图自定义
android·前端·echarts
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_28:(使用选择器 API 在 DOM 树中进行选择与遍历)
前端·ui·html·音视频·webrtc
东北甜妹4 小时前
K8s Ingress
java·运维·前端
RickyWasYoung4 小时前
【Matlab】合并多个子图的fig文件为一个大图
前端·matlab·信息可视化
爱滑雪的码农4 小时前
React+three.js之项目搭建
前端·javascript·react.js
张风捷特烈4 小时前
状态管理大乱斗#07 | Signals 源码评析 - 暗流涌动
android·前端·flutter
接着奏乐接着舞6 小时前
sse 两种调用方式
前端·javascript·vue.js
不会敲代码112 小时前
手写 Mini React:从 JSX 到虚拟 DOM 再到 render,搞懂 React 底层原理
前端·javascript·react.js
kyriewen13 小时前
你的代码仓库变成“毛线团”了?Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试