Taro ui标签多选

博主在毕设中尝试用ReactJS实现标签多选功能,经过研究解决了问题,但最终未使用。文章记录了代码逻辑和组件部分,并反思了在学习React过程中遇到的错误,如在循环中使用useState,提出应动态储存并修改状态。作者计划回头重新学习更优的实现方式。
摘要由CSDN通过智能技术生成

写毕设的时候本来想用标签多选来进行筛选内容,可能查的关键词不太对没怎么看到关于标签多选的代码。研究了半个小时终于写出来了,结果第二天发现这个功能用不上,遂纪念一下以防万一以后碰到相似需要还要重新思考。

数据代码

const tap = [
    { name: "小说", state: false },
    { name: "漫画", state: false },
    { name: "课本", state: false },
    { name: "只看同校", state: false },
    { name: "其他", state: false }
  ];
  //点击选择后的标签组
  const [checkTap, setCheck] = useState<Array<string>>([]);

逻辑代码:

当时写的时候刚入门react,现在知道useReducer的存在可能要更方便一些,但是没有时间修改了就当存个思路了

const check = (e: TagInfo) => {
    let arr = checkTap;
    if (arr.includes(e.name)) {
      arr.splice(arr.indexOf(e.name), 1);
    } else {
      arr.push(e.name);
    }
    setCheck(arr);
  };
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值