# Checkbox 多选框

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/checkbox/freepass)
- 平台：PC
- 维护者：许平源
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s7
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Checkbox]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react';
import { Checkbox, CheckboxEvent, CheckboxDataType, CheckboxValueType, constants, DataType } from '@weapp/ui';

const { uiPcClsPrefix } = constants;

const prefixCls = `${uiPcClsPrefix}-demo-checkbox`;

const optionsWithDisabled: CheckboxDataType = [
  {
    id: 'Apple',
    title: 'Apple',
    content: 'Apple',
    color: '#5D9CEC'
  },
  {
    id: 'Pear',
    title: 'Pear',
    content: 'Pear',
    color: '#FF4D4F'
  },
  {
    id: 'Orange',
    title: 'Orange',
    content: 'Orange',
    disabled: true,
    color: '#52C41A'
  },
];

const defaultValue = [
  {
    id: 'Apple',
    value: 'Apple',
    content: 'Apple',
  },
];

export default class CheckboxDemo extends React.Component {

  state = {
    checked1: true,
    checked2: true,
    checked: true,
    label: "已选择",
    value: ['Apple'],
    value1: ['Apple'],
    value2: ['Apple'],
    value3: ['Apple'],
    value4: ['Apple'],
  }

  onChange1 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
    // console.log(value, option, e)
    this.setState({ checked1: value })
  }
  onChange2 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
    // console.log(value, option, e)
    // this.setState({ value: value })
    this.setState({ checked2: value })
  }

  onChange3 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
    // console.log(value, option, e)
    // this.setState({ value: value })
    this.setState({ value1: value })
  }
  onChange4 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
    // console.log(value, option, e)
    // this.setState({ value: value })
    this.setState({ value2: value })
  }
  onChange5 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
    // console.log(value, option, e)
    // this.setState({ value: value })
    this.setState({ value3: value })
  }
  onChange6 = (value: CheckboxValueType, option: CheckboxDataType, e: CheckboxEvent) => {
    // console.log(value, option, e)
    // this.setState({ value: value })
    this.setState({ value4: value })
  }

  onClick = (v: string | DataType, o: DataType, e: CheckboxEvent) => {
    // console.log('value', v)
    // console.log('option', o)
    // console.log('onClick', e)
  }
  onBlur = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {
    // console.log('onBlur', e)
  }
  onFocus = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {
    // console.log('onFocus', e)
  }

  render() {
    const { checked, checked1, checked2, value, value1, value2, value3, value4 } = this.state;
    return (
      <div className={prefixCls}>
        <h4>基本用法</h4>
        <Checkbox>不受控（defaultValue）</Checkbox>
        <Checkbox value={checked2} onChange={this.onChange2}>受控（value）</Checkbox>
        <h4>只读状态</h4>
        <Checkbox defaultValue={false} readOnly>只读</Checkbox>
        <Checkbox defaultValue={true} readOnly >只读</Checkbox>
        <h4>禁用状态</h4>
        <Checkbox value={checked} disabled>禁用</Checkbox>
        <Checkbox value={false} disabled>禁用</Checkbox>
        <h4>indeterminate 状态</h4>
        <Checkbox indeterminate={true} >半选</Checkbox>
        <Checkbox disabled indeterminate={true} >半选（禁用）</Checkbox>
        <Checkbox readOnly indeterminate={true} >半选（只读）</Checkbox>
        <h4>Checkbox datas -- value</h4>
        <Checkbox data={optionsWithDisabled} value={value1} onChange={this.onChange3} />
        <h4>Checkbox datas -- defaultValue</h4>
        <Checkbox data={optionsWithDisabled} defaultValue={value} />
        <h4>Checkbox datas -- showDataGroupByType - defaultValue</h4>
        <Checkbox minSelected={2} data={optionsWithDisabled} showDataGroupByType={true} defaultValue={defaultValue} />
        <h4>Checkbox datas(只读)</h4>
        <Checkbox data={optionsWithDisabled} defaultValue={value} readOnly />
        <h4>Checkbox datas(禁用)</h4>
        <Checkbox data={optionsWithDisabled} defaultValue={value} disabled />
        <h4>Checkbox datas 垂直</h4>
        <Checkbox data={optionsWithDisabled} value={value2} vertical labelMaxWidth={'70%'} onChange={this.onChange4} />
        <h4>Checkbox datas(标签)</h4>
        <Checkbox data={optionsWithDisabled} value={value3} optionType='tag' onChange={this.onChange5} />
        <h4>Checkbox datas(标签,不带check框)</h4>
        <Checkbox data={optionsWithDisabled} defaultValue={value4} optionType='tag' hideCheck onChange={this.onChange6} />
        <h4>Checkbox (check框居右)</h4>
        <Checkbox data={optionsWithDisabled} defaultValue={value4}  onChange={this.onChange6} isHoldRight/>
        <Checkbox isHoldRight>不受控（defaultValue）</Checkbox>
        <h4>Checkbox (check框居右,竖向,左对齐)</h4>
        <Checkbox data={optionsWithDisabled} value={value2} vertical alignType={'left'} isHoldRight  onChange={this.onChange4} />
        <h4>Checkbox (check框居右,竖向,右对齐)</h4>
        <Checkbox data={optionsWithDisabled} value={value2} vertical alignType={'right'} isHoldRight  onChange={this.onChange4} />
        <h4>Checkbox (check框居右,竖向,两端对齐)</h4>
        <Checkbox data={optionsWithDisabled} value={value2} vertical alignType={'justify'} isHoldRight onChange={this.onChange4} />
        <h4>Checkbox (check框居右,竖向,默认)</h4>
        <Checkbox data={optionsWithDisabled} value={value2} vertical  isHoldRight onChange={this.onChange4} />
      </div>
    );
  }
}
```

### 自定义样式

自定义样式（图片 check 框）

```jsx
import React from 'react';
import { constants, Checkbox, CheckboxEvent, DataType, CheckboxDataType, CheckboxOptionProps } from '@weapp/ui';

let RadioCustomDemoPcClsPrefix = `${constants.uiPcClsPrefix}-radio-custom-demo`

const datas: CheckboxDataType = [
  {
    id: 'A',
    content: '选项A选项A选项A选项A选项A选项A选项A超长超长超长超长超长超长超长超长超长超长',
    src: '/build/ui/demo/assets/photo-view/5.jpeg',
    disabled: true,
    alt: '选项A'
  },
  {
    id: 'B',
    content: '选项B',
    src: '/build/ui/demo/assets/photo-view/3.jpeg',
    disabled: false,
    alt: '选项b'
  },
  {
    id: 'C',
    content: '选项C',
    src: '/build/ui/demo/assets/photo-view/2.jpeg',
    disabled: false,
    alt: '选项c'
  },
]

interface CustomRadioProps { }
interface CustomRadioState {
  datas: CheckboxDataType
}

class CustomRadioDemo extends React.PureComponent<CustomRadioProps, CustomRadioState> {

  constructor(props: CustomRadioProps) {
    super(props);
    this.state = {
      datas
    }
  }

  customOptionContenRender = (optionProps: CheckboxOptionProps, content: any) => {
    console.log('customOptionContenRender')
    console.log(optionProps)
    console.log(content)
    let color = {
      color: '#999'
    }
    if (optionProps.value === 'A') {
      color = { color: 'red' }
    } else if (optionProps.value === 'B') {
      color = { color: 'green' }
    } else if (optionProps.value === 'C') {
      color = { color: 'blur' }
    }
    return <span style={color}>{`${optionProps.value} - ${content}`}</span>
  }

  customOptionRender = (_props: CheckboxOptionProps, ele: React.ReactNode) => {
    console.log('customOptionRender')
    console.log('_props', _props)
    console.log(' _props.option', _props.option)
    console.log('ele', ele)
    const demoWrapper = {
      background: '#ffffff',
      border: '1px solid #e5e5e5',
      borderRadius: '3px',
      display: 'inline-table',
      margin: '10px'
    }
    const radioWrapper = {
      padding: '10px'
    }
    let content = (
      <div
        style={demoWrapper}
      >
        <div >
          <img alt={'warning'} />
        </div>
        <div
          style={radioWrapper}>
          {ele}
        </div>
      </div>
    )
    return content
  }

  onClick = (v: string | DataType, o: DataType, e: CheckboxEvent) => {
    console.log(v)
    console.log(o)
    console.log(e)
  }

  render() {
    return (
      <div className={RadioCustomDemoPcClsPrefix}>
        <h3>修改选项内容</h3>
        <Checkbox
         
          data={datas}
          onClick={this.onClick}
          customOptionContenRender={this.customOptionContenRender}
        />
        <h3>图片多选</h3>
        <Checkbox
         
          data={datas}
          optionType={'image'}
        />
        <h3>图片多选</h3>
        <Checkbox
         
          data={datas}
          optionType={'image'}
          vertical
        />
        <h3>自定义渲染</h3>
        <Checkbox
         
          data={datas}
          customOptionRender={this.customOptionRender}
        />
      </div>
    );
  }
}

export default CustomRadioDemo;
```

### 只读模式

只读模式

```jsx
import React from 'react';
import { Checkbox, CheckboxDataType, constants } from '@weapp/ui';

const { uiPcClsPrefix } = constants;

const prefixCls = `${uiPcClsPrefix}-demo-checkbox`;

const optionsWithDisabled: CheckboxDataType = [
  {
    id: 'Apple',
    title: 'Apple',
    content: 'Apple',
    color: '#5D9CEC'
  },
  {
    id: 'Pear',
    title: 'Pear',
    content: 'Pear',
    color: '#FF4D4F'
  },
  {
    id: 'Orange',
    title: 'Orange',
    content: 'Orange',
    disabled: true,
    color: '#52C41A'
  }
];

const optionsWithDisabled2: CheckboxDataType = [
  {
    id: 'Apple',
    title: 'Apple',
    content: 'Apple',
    color: '#5D9CEC'
  },
  {
    id: 'Pear',
    title: 'Pear',
    content: 'Pear',
    color: '#FF4D4F'
  },
  {
    id: 'Orange',
    title: 'Orange',
    content: 'Orange',
    disabled: true,
    color: '#52C41A'
  },
  {
    id: 'Apple_long',
    title: 'Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长',
    content: 'Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长Apple_超长',
    disabled: true,
    color: '#000000'
  },
];

export default class CheckboxDemo extends React.Component {

  render() {
    return (
      <div className={prefixCls}>
        <h4>单个只读</h4>
        <Checkbox defaultValue={false} readOnly>只读</Checkbox>
        <Checkbox defaultValue={true} readOnly >只读</Checkbox>
        <h4>多个数据只读</h4>
        <Checkbox
          data={optionsWithDisabled}
          defaultValue={['Apple']}
          readOnly
        />
        <h4>多个数据只读(文字超长)</h4>
        <Checkbox
          data={optionsWithDisabled2}
          defaultValue={['Apple_long']}
          labelMaxWidth={250}
          readOnly
        />
        <h4>多个数据只读(仅字段名称)</h4>
        <Checkbox
          data={optionsWithDisabled}
          defaultValue={['Apple', 'Orange']}
          readOnly
          readOnlyMode='string'
        />
        <h4>多个数据只读(仅字段名称文字超长)</h4>
        <Checkbox
          data={optionsWithDisabled2}
          defaultValue={['Orange', 'Apple_long']}
          readOnly
          readOnlyMode='string'
        />
      </div>
    );
  }
}
```

### 选项带提示信息

```jsx
import React from 'react';
import { Checkbox, CheckboxDataType, constants, } from '@weapp/ui';

const { uiPcClsPrefix } = constants;

const prefixCls = `${uiPcClsPrefix}-demo-checkbox`;

const optionsWithDisabled: CheckboxDataType = [
  {
    id: 'Apple',
    title: 'Apple',
    content: 'Apple',
    color: '#5D9CEC',
    tips: '可见即可得，组件在前台跟设计器展示效果一致，搭建比较容易上手，布局的样式/排列方式都通过组件来实现。',
  },
  {
    id: 'Pear',
    title: 'Pear',
    content: 'Pear',
    color: '#FF4D4F',
    tips: '可见即可得，组件在前台跟设计器展示效果一致，搭建比较容易上手，布局的样式/排列方式都通过组件来实现。',
  },
  {
    id: 'Orange',
    title: 'Orange',
    content: 'Orange',
    disabled: true,
    color: '#52C41A',
    tips: '可见即可得，组件在前台跟设计器展示效果一致，搭建比较容易上手，布局的样式/排列方式都通过组件来实现。',
  },
];

export default class CheckboxDemo extends React.Component {

  render() {
    return (
      <div className={prefixCls}>

        <h4>Checkbox 带提示</h4>
        <Checkbox
         
          tips={'可见即可得，组件在前台跟设计器展示效果一致，搭建比较容易上手，布局的样式/排列方式都通过组件来实现。'}
        >
          流式布局
        </Checkbox>
        <h4>Checkbox data 带提示</h4>
        <Checkbox
         
          data={optionsWithDisabled}
        >
          content
        </Checkbox>
        <h4>Checkbox data tag 带提示</h4>
        <Checkbox
         
          data={optionsWithDisabled}
          optionType={'tag'}
        >
          content
        </Checkbox></div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| domKey | 组件唯一标识（使用 data 时唯一标识为 data.id) | string |  |  |
| value | 受控（单个使用时传递 Boolean) | CheckboxValueType |  |  |
| defaultValue | 默认值（单个使用时传递 Boolean) | CheckboxValueType |  |  |
| disabled | 禁用 | boolean |  | false |
| style | 自定义样式 | CSSProperties |  |  |
| className | 自定义 className | string |  |  |
| overlayClassName | 选项的样式名 | string |  |  |
| indeterminate | 是否半选 | boolean |  |  |
| data | 渲染一组 checkbox 时的数据 | CheckboxDataType |  |  |
| onChange | 数据变化回调 | (value: ValueType, option: OptionData , e: RadioEvent) => void |  |  |
| onClick | 点击回调 | (value: ValueType, option: OptionData , e: RadioEvent) => void |  |  |
| customOptionRender | 自定义每一选项 | (props: RadioOptionProps, ele: ReactNode, eventProps?: any) => ReactNode |  |  |
| customOptionContenRender | 复写任一选项的 content 内容 | (props: RadioOptionProps, ele: ReactNode) => ReactNode |  |  |
| customOverlayRender | 复写整体 radio | (_: any, ele: ReactNode) => ReactNode |  |  |
| vertical | 是否竖直排列（data 时生效） | boolean |  |  |
| groupStyle | 设置外层 style（data 存在时生效） | CSSProperties |  |  |
| groupClassName | 设置外层 groupClassName（data 存在时生效） | string |  |  |
| name | checkbox 的 name 属性 | string |  |  |
| hideCheck | 隐藏 check 框 | boolean |  | false |
| optionType | 选项类型 | 'default' \| 'tag' |  | 'default' |
| labelMaxWidth | label 最大宽度 (在表单中，默认生效，宽度 150，传递 0 则不生效，在竖直排列时可传递百分比,在选框居右模式下不生效) | number \| string | false |  |
| minSelected | 设置最少选择个数 | number | false |  |
| minSelectedMessage | 少于最少选择个数时提示信息 | string | false |  |
| minSelectMessageProps | 复写少于最少传递个数提示信息 props | DialogMessageProps | false |  |
| showTitle | 控制 title 是否显示 api | boolean | false | true |
| title | 提示文本(适用于担当适用check框情景) | string | 否 |  |
| readOnlyMode | 只读模式选择（区别普通的radio只读模式和表单中仅显示字段的只读模式） | boolean | 否 | false |
| tips | 提示信息（如果是传递了 data，直接在 data 中设置） | string | false | - |
| isHoldRight | checkbox 是否靠右显示 | boolean |  | false |
| alignType | 左右对齐方式（仅单个使用或者纵向排列时生效） | string |  | left |
