@antmjs/vantui/es/checkbox/demo/demo7.js

一套适用于Taro3及React的vantui组件库

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable */
import react from 'react';
import { CheckboxGroup, CellGroup, Cell, Checkbox } from '@antmjs/vantui';
import { jsx as _jsx } from "react/jsx-runtime";
var list = ['aa', 'bb', 'cc'];
export default function Demo() {
  var _react$useState = react.useState(['bb']),
    _react$useState2 = _slicedToArray(_react$useState, 2),
    values = _react$useState2[0],
    setValues = _react$useState2[1];
  var cellClick = function cellClick(item) {
    if (values.includes(item)) {
      values.splice(values.indexOf(item), 1);
    } else values.push(item);
    setValues(_toConsumableArray(values));
  };
  return /*#__PURE__*/_jsx(CheckboxGroup, {
    value: values,
    children: /*#__PURE__*/_jsx(CellGroup, {
      children: list.map(function (item) {
        return /*#__PURE__*/_jsx(Cell, {
          title: '复选框 ' + item,
          clickable: true,
          onClick: function onClick() {
            return cellClick(item);
          },
          children: /*#__PURE__*/_jsx(Checkbox, {
            style: {
              justifyContent: 'flex-end'
            },
            name: item
          })
        }, item);
      })
    })
  });
}