【Taro开发】-简易的checkBoxGroup组件（九）

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

---

---

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui

实现效果：
一个多选组，可全选及取消

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.checkBox组件

taro-ui没有该样式的选择框，自己写了一个，顺便附上代码

/* eslint-disable no-undef */
import { Component } from "react";
import { View } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "./index.scss";

class CheckBox extends Component {
    constructor() {
        super();
    }

    render() {
        const { checked, onChange } = this.props;
        return (
            <>
                {checked ? (
                    <View
                        className="check trace-rowCenter"
                        onClick={( ) => onChange(!checked)}
                    >
                        <AtIcon value="check" size={26} color="#fff" />
                    </View>
                ) : (
                    <View className="unCheck" onClick={() => onChange(!checked)} />
                )}
            </>
        );
    }
}
export default CheckBox;

@import "@/styles/variables.scss";
.unCheck {
  width: 32px;
  height: 32px;
  border: 2px solid $color-text-b3;
  opacity: 1;
  border-radius: 8px;
}
.check {
  width: 32px;
  height: 32px;
  background-color: $color-default;
  border: 2px solid $color-default;
  opacity: 1;
  border-radius: 8px;
}

2.checkBoxGroup组件

/* eslint-disable no-undef */
import { Component } from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";
import { CheckBoxCom } from "@/components";

class CheckBoxGroup extends Component {
  constructor() {
    super();
    this.state = {
      groupMes: {},
      ids: [],
      allSel: false
    };
  }

  componentDidMount() {
    const { groupMes, initIds } = this.props;
    this.setState({
      groupMes,
      ids: initIds || [],
      allSel: initIds?.length === groupMes?.groupList?.length
    });
  }

  componentDidUpdate(prevProps, prevState) {
    const { ids } = this.state;
    const { onChange } = this.props;
    if (JSON.stringify(ids) !== JSON.stringify(prevState.ids)) {
      onChange && onChange(this.state.ids, this.state.groupMes.id);
    }
  }

  render() {
    const { groupMes, allSel, ids } = this.state;
    const { onChange } = this.props;
    return (
      <View className="group" {...this.props}>
        <View className="trace-rowBetween">
          <Text className="font-black-lg">{groupMes.title}</Text>
          <CheckBoxCom
            checked={allSel}
            onChange={checked => {
              this.setState(
                (preveState, preveProps) => ({
                  allSel: checked
                }),
                () => {
                  if (checked) {
                    let temp = groupMes?.groupList?.map(item => {
                      return item.value;
                    });
                    this.setState({
                      ids: temp
                    });
                  } else {
                    this.setState({
                      ids: []
                    });
                  }
                }
              );
            }}
          />
        </View>
        <View className="itemBox">
          {groupMes?.groupList?.map(item => {
            return (
              <View className="trace-rowAlignCenter item">
                <CheckBoxCom
                  checked={ids?.indexOf(item.value) !== -1}
                  onChange={checked => {
                    if (checked) {
                      let temp = JSON.parse(JSON.stringify(ids));
                      temp.push(item.value);
                      this.setState({
                        ids: temp,
                        allSel: temp?.length === groupMes?.groupList?.length
                      });
                    } else {
                      let temp = JSON.parse(
                        JSON.stringify(ids.filter(id => id !== item.value))
                      );
                      this.setState({
                        ids: temp,
                        allSel: false
                      });
                    }
                  }}
                />
                <Text className="font-6-m itemText">{item.label}</Text>
              </View>
            );
          })}
        </View>
      </View>
    );
  }
}
export default CheckBoxGroup;

3.使用

groupMes:{
   id: 1,
   title: "soil",
   groupList: [
     {
       label: "node1",
       value: 1
     },
     {
       label: "node2",
       value: 2
     },
     {
       label: "node3",
       value: 3
     }
   ]
 }
initIds：[1,2]

//render
	<CheckBoxGroup
        groupMes={groupMes}
        initIds={initIds}
        onChange={(ids, deviceId) => this.changeSel(ids, deviceId)}
    />