• 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作为参数传递,即可使用

  • 相关阅读:
    存储过程示例
    对话:关于委托的进一步讨论(转)
    Oracle SQLServer 的随机数问题 .(转)
    AJAX控件之AutoComplete
    穷人与富人的区别
    喜欢(转)
    用sql求得每行行号
    ajax 注册
    如何快速生成100万不重复的8位编号 (转)
    存儲過程的基本語句
  • 原文地址:https://www.cnblogs.com/ganmy/p/6670172.html
Copyright © 2020-2023  润新知