zoukankan      html  css  js  c++  java
  • react +MUI checkbox使用

    PS:因项目采用MUI,故,在此所讲的checkbox组件为MUI里的checkbox

    因checkbox组件里 oncheck函数没法判断复选框是否选中,故,若直接复用且通过state改变checked属性,会引起一选全选,不选都不选(因为这里的state掌管着所有checkbox的checked值)。为避免这种情况,有两种解决方式:

    1.将checkbox分离出来;

    上图为确保只有当卡片至少选中一个时删除按钮才显示,采用将其分离的方式。

    实现方法:在自己封装的checkbox里定义了一个全局数组arr,通过props将卡片ID传给checkbox组件,在调用oncheck函数的时候,当checked值为true,将id push进arr里,否则,将id从arr里移除。(完全可看成是仅对当前checkbox进行操作)。最后将全局数组arr通过 props方式传递给父组件(在这里是卡片组件)

    代码片段如下:

    2.直接复用但不采用state控制checked属性,通过定义一个全局数组idArr里,记录所选checkbox的ID,当点击复选框时,若ID在数组idArr里,则将该ID从数组里移除,若不在数组idArr里,则将其添加进数组。

    若id1存在于idArr中,移除id1的方法: idArr.splice(idArr.indexOf(id1),1)

    若id1不在idArr中,添加id1的方法: idArr.push(id1)

    上图采用的方法为第二种,当点击提交时,直接将当前idArr作为参数传递,即可使用

  • 相关阅读:
    java处理数据库date类型数据
    in与exist , not in与not exist 的区别
    Eclipse的调试功能的10个小窍门
    关于Synchornized,Lock,AtomicBoolean和volatile的区别介绍
    推荐使用concurrent包中的Atomic类
    深入 Java 调试体系: 第 1 部分,JPDA 体系概览
    dom 绘制正方形
    dom 拖拽div
    dom 按着shift多选
    dom select选单
  • 原文地址:https://www.cnblogs.com/ganmy/p/6670172.html
Copyright © 2011-2022 走看看