# MGridCheckbox 窗格多选框

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/grid-checkbox/freepass)
- 平台：移动端
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/ly/10737/#id=6pibam&p=%E6%96%87%E6%A1%A3%E8%AF%B4%E6%98%8E&g=1

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from "react";
import { MGridCheckbox } from "@weapp/ui";

const options = [
  {
    id: '1',
    value: '11',
    label: '111'
  }, {
    id: '2',
    value: '22超长超长超长22超长超长超长22超长超长超长',
    label: '222'
  }, {
    id: '3',
    value: '33',
    label: '333'
  }, {
    id: '4',
    value: '44',
    label: '444'
  }, {
    id: '5',
    value: '55',
    label: '555'
  }, {
    id: '6',
    value: '66',
    label: '666'
  }, {
    id: '7',
    value: '77',
    label: '777'
  }, {
    id: '8',
    value: '88',
    label: '888'
  }, {
    id: '9',
    value: '99',
    label: '999'
  }, {
    id: '0',
    value: '00',
    label: '000'
  }
]

class Demo extends React.Component<any, any> {

  state = {
    value: ['66']
  }

  onChange = (value: string[], data: any[]) => {
    console.log('value', value)
    console.log('data', data)
  }

  onValueChange = (value: string[], data: any[]) => {
    console.log('value', value)
    console.log('data', data)
    this.setState({ value: value })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <h4>基础用法</h4>
        <MGridCheckbox
         
          options={options}
          column={3}
          defaultValue={['55']}
          contentStyle={{ height: 40 }}
          onChange={this.onChange}
        />
        <h4>受控</h4>
        <MGridCheckbox
         
          options={options}
          column={3}
          contentStyle={{ height: 40 }}
          onChange={this.onValueChange}
        />
        <h4>受控不更新值</h4>
        <MGridCheckbox
         
          options={options}
          column={3}
          contentStyle={{ height: 40 }}
          value={['77']}
          onChange={this.onChange}
        />
        <h4>单选</h4>
        <MGridCheckbox
         
          options={options}
          column={3}
          contentStyle={{ height: 40 }}
          value={['77']}
          onChange={this.onChange}
          isSingleSelect
        />
      </div>
    )
  }
}

export default Demo;
```

## API

### 类型说明：（请从@weapp/ui 中导出）

```typescript
type MGridCheckboxOptionData = {
  /* 数据的标示 */
  id: string;
  /* 数据显示内容 */
  value: string;
  /* 数据的提示 */
  label: string;
  /* 是否是禁用项 */
  disabled?: boolean;
  /* 是否可选 */
  checkable?: boolean;
};
type MGridCheckboxOptionsType = MGridCheckboxOptionData[];
```

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 受控值 | string[] | 否 |  |
| defaultValue | 默认值 | string[] | 否 |  |
| options | 数据配置 | MGridCheckboxOptionsType | 是 |  |
| column | 每一行的列数 | number | 否 | 4 |
| contentStyle | 单元格的style | CSSProperties | 否 |  |
| onChange | 点击单元格的参数回调 | (value: string[], data: MGridCheckboxOptionsType) => void | 否 |  |
| checkIcon | 选中的图标 | IconNames | 否 |  |
| isSingleSelect | 是否单选 | boolean | 否 |  |
