# MCheckbox 复选框

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react';
import { MCheckboxEvent, MCheckboxValueType, MCheckbox, MCheckboxDataType, DataType, constantsM } from '@weapp/ui';

export default class CheckboxDemo extends React.Component {

  state = {
    checked: true,
    indeterminate: true,
    label: "已选择"
  }

  onChange = (value: MCheckboxValueType, option: MCheckboxDataType, e: MCheckboxEvent) => {
    console.log(value, option, e)
    this.setState({ checked: value })
  }
  indeterminateChange = () => {
    this.setState({ indeterminate: !this.state.indeterminate })
  }
  onClick = (v: string | DataType, o: DataType, e: MCheckboxEvent) => {
    console.log('onClick', v)
    console.log('onClick', o)
    console.log('onClick', e)
  }
  onBlur = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {
    console.log('onBlur', v, o, e)
  }
  onFocus = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {
    console.log('onFocus', v, o, e)
  }

  customOptionRender = (_: any, ele: React.ReactNode, eventProps?: any) => {
    const { onClick } = eventProps;
    return <div>
      {ele}
      <button onClick={onClick}> 点击</button>
    </div>
  }

  render() {
    const { checked, indeterminate } = this.state;
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_checkbox`}
      >
        <h3 className={'list_title'}>基础用法</h3>
        <div className={`list_item`}>
          <MCheckbox value={checked} onChange={this.onChange}>受控（value）：true</MCheckbox>
          <MCheckbox defaultValue={false}>非受控（defaultChecked）: false</MCheckbox>
          <MCheckbox indeterminate={indeterminate}>半选</MCheckbox>
        </div>
        <h3 className={'list_title'}>只读</h3>
        <div className={`list_item`}>
          <MCheckbox defaultValue={true} readOnly>只读选中</MCheckbox>
          <MCheckbox readOnly>只读未选中</MCheckbox>
          <MCheckbox readOnly indeterminate>只读半选</MCheckbox>
        </div>
        <h3 className={'list_title'}>禁用状态</h3>
        <div className={`list_item`}>
          <MCheckbox value={true} disabled>禁用选中</MCheckbox>
          <MCheckbox disabled>禁用未选中</MCheckbox>
          <MCheckbox disabled indeterminate>禁用半选</MCheckbox>
        </div>
        <h3 className={'list_title'}>搭配表单组件使用（居右两端对齐）</h3>
        <div className={`list_item`}>
          <MCheckbox value={checked} isHoldRight onChange={this.onChange}>受控（value）：true</MCheckbox>
          <MCheckbox defaultValue={false} isHoldRight >非受控（defaultValue）：false</MCheckbox>
        </div>
        <h3 className={'list_title'}>搭配表单组件使用（居右右对齐）</h3>
        <div className={`list_item`}>
          <MCheckbox value={checked} isHoldRight onChange={this.onChange} alignType='right'>受控（value）：true</MCheckbox>
          <MCheckbox defaultValue={false} isHoldRight alignType='right'>非受控（defaultValue）：false</MCheckbox>
        </div>
        <h3 className={'list_title'}>基础用法（旧）</h3>
        <div className={`list_item`}>
          <MCheckbox useRadioBox value={checked} onChange={this.onChange}>受控（value）：true</MCheckbox>
          <MCheckbox useRadioBox defaultValue={false}>非受控（defaultChecked）: false</MCheckbox>
          <MCheckbox  useRadioBox indeterminate={indeterminate}>半选</MCheckbox>
        </div>
        <h3 className={'list_title'}>只读（旧）</h3>
        <div className={`list_item`}>
          <MCheckbox useRadioBox defaultValue={true} readOnly>只读选中</MCheckbox>
          <MCheckbox useRadioBox readOnly>只读未选中</MCheckbox>
          <MCheckbox useRadioBox readOnly indeterminate>只读半选</MCheckbox>
        </div>
        <h3 className={'list_title'}>禁用状态（旧）</h3>
        <div className={`list_item`}>
          <MCheckbox useRadioBox value={true} disabled>禁用选中</MCheckbox>
          <MCheckbox useRadioBox disabled>禁用未选中</MCheckbox>
          <MCheckbox useRadioBox disabled indeterminate>禁用半选</MCheckbox>
        </div>
        <h3 className={'list_title'}>搭配表单组件使用（居右两端对齐）【旧】</h3>
        <div className={`list_item`}>
          <MCheckbox useRadioBox value={checked} isHoldRight onChange={this.onChange}>受控（value）：true</MCheckbox>
          <MCheckbox useRadioBox defaultValue={false} isHoldRight >非受控（defaultValue）：false</MCheckbox>
        </div>
      </div>
    );
  }
}
```

### 渲染一组数据

通过 data 渲染一组数据

```jsx
import React from 'react';
import { MCheckboxEvent, MCheckboxValueType, MCheckbox, MCheckboxDataType, DataType, constantsM } from '@weapp/ui';

const optionsWithDisabled: MCheckboxDataType = [
  {
    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 datas: MCheckboxDataType = [
  {
    id: 'A',
    content: 'Aadfojwogfnweogwejfgewjfweofoioihfjweof',
    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'
  },
]

export default class CheckboxDemo extends React.Component {

  state = {
    indeterminate: true,
    label: "已选择",
    value: ['Apple']
  }
  handleChange = (value: MCheckboxValueType, option: MCheckboxDataType, e: MCheckboxEvent) => {
    console.log(value, option, e)
    this.setState({ value })
  }

  indeterminateChange = () => {
    this.setState({ indeterminate: !this.state.indeterminate })
  }
  onClick = (v: string | DataType, o: DataType, e: MCheckboxEvent) => {
    console.log('onClick', v)
    console.log('onClick', o)
    console.log('onClick', e)
  }
  onBlur = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {
    console.log('onBlur', v, o, e)
  }
  onFocus = (v: string | DataType, o: DataType, e: React.FocusEvent<HTMLInputElement>) => {
    console.log('onFocus', v, o, e)
  }

  render() {
    const { value } = this.state;
    console.log(value)
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_checkbox`}
      >
        <h3 className={'list_title'}>Checkbox datas -- value</h3>
        <div className={`list_item`}>
          <MCheckbox data={optionsWithDisabled} value={value} onChange={this.handleChange} />
        </div>
        <h3 className={'list_title'}>Checkbox datas -- 只读</h3>
        <div className={`list_item`}>
          <MCheckbox readOnly data={optionsWithDisabled} defaultValue={value} onChange={this.handleChange} />
        </div>
        <h3 className={'list_title'}>Checkbox datas -- 禁用</h3>
        <div className={`list_item`}>
          <MCheckbox disabled data={optionsWithDisabled} defaultValue={value} onChange={this.handleChange} />
        </div>
        <h3 className={'list_title'}>Checkbox datas -- defaultValue</h3>
        <div className={`list_item`}>
          <MCheckbox data={optionsWithDisabled} defaultValue={value}
            onChange={this.handleChange}
            onBlur={this.onBlur}
            onFocus={this.onFocus}
          />
        </div>
        <h3 className={'list_title'}>Checkbox datas -- defaultValue（check 靠右）</h3>
        <div className={`list_item`}>
          <MCheckbox isHoldRight data={optionsWithDisabled} defaultValue={value} onChange={this.handleChange} />
        </div>
        <h3 className={'list_title'}>Checkbox datas(标签)</h3>
        <div className={`list_item`}>
          <MCheckbox data={optionsWithDisabled} value={value} optionType='tag' onChange={this.handleChange} />
        </div>
        <h3 className={'list_title'}>Checkbox datas(标签,不带check框)</h3>
        <div className={`list_item`}>
          <MCheckbox data={optionsWithDisabled} value={value} optionType='tag' hideCheck onChange={this.handleChange} />
        </div>

        <h3>图片多选</h3>
        <MCheckbox
         
          data={datas}
          optionType={'image'}
        />
      </div>
    );
  }
}
```

### 自定义渲染

自定义渲染Checkbox组件

```jsx
import React, { ReactNode } from 'react';
import { MCheckbox, MCheckboxEvent, MCheckboxOptionType, MCheckboxValueType, constantsM, MCheckboxDataType, utils } from '@weapp/ui';
const { pauseEvent } = utils;

const datas: MCheckboxDataType = [
  {
    id: 'A',
    content: '选项A',
    disabled: false,
    alt: '选项A'
  },
  {
    id: 'B',
    content: '选项B',
    disabled: false,
    alt: '选项b'
  },
  {
    id: 'C',
    content: '选项C',
    disabled: false,
    alt: '选项c'
  },
]

const overlayStyle = {
  height: '40px',
  display: 'flex',
  alignItems: 'center'
}

export default class RadioDemo extends React.Component {

  state = {
    checked: true,
    value: ['B'],
    label: "已选择",
  }

  onChange = (v: MCheckboxValueType, o: MCheckboxDataType, e: MCheckboxEvent) => {
    console.log(v)
    console.log(o)
    console.log(e)
    this.setState({ checked: v })
  }
  onClick = (v: MCheckboxValueType, o: MCheckboxOptionType, e: MCheckboxEvent) => {
    console.log(v)
    console.log(o)
    console.log(e)
  }
  onBlur = (v: MCheckboxValueType, o: MCheckboxOptionType, e: React.FocusEvent<HTMLInputElement>) => {
    console.log('onBlur', v, o, e)
  }
  onFocus = (v: MCheckboxValueType, o: MCheckboxOptionType, e: React.FocusEvent<HTMLInputElement>) => {
    console.log('onFocus', v, o, e)
  }
  onKeyPress = (v: MCheckboxValueType, o: MCheckboxOptionType, e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log('onKeyPress', v, o, e)
  }
  onKeyDown = (v: MCheckboxValueType, o: MCheckboxOptionType, e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log('onKeyDown', v, o, e)
  }
  /** customOptionContenRender */
  customOptionContenRender = (props: any, ele: ReactNode) => {
    console.log('prop,ele', props, ele);
    return <div onClick={this.customClick}> 复写 content</div>
  }
  /** customOptionRender */
  onChange2 = (v: MCheckboxValueType, o: MCheckboxDataType, e: MCheckboxEvent) => {
    console.log('customOptionRender', v)
    this.setState({ value: v })
  }
  customClick = (e: any) => {
    pauseEvent(e);
    console.log('customClick')
  }
  customOptionRender = (props: any, ele: React.ReactNode, eventProps?: any) => {
    const { option, checkDom } = props;
    return <div onClick={eventProps.onClick} className={'ui-m-checkbox-wrapper ui-m-checkbox-wrapper-hold-right'}>
      <span className='ui-m-checkbox-label' >
        {option.content}
        {'('}<span onClick={this.customClick} style={{ color: '#5d9cec' }}>{'提示语'}</span>{')'}
      </span>
      <span className='ui-m-checkbox-right'>{checkDom}</span>
    </div>
  }
  /** customOverlayRender */
  customOverlayRender = (_: any, content: ReactNode) => {
    return (
      <div>
        <div style={overlayStyle}>Label: customOverlayRender </div>
        {content}
      </div>
    )
  }
  render() {
    const { checked, value } = this.state;
    console.log('render checked', checked)
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_radio`}
      >
        <h3 className={'list_title'}>customOptionContenRender	复写任一选项的 content 内容</h3>
        <div className={`list_item`}>
          <MCheckbox customOptionContenRender={this.customOptionContenRender} value={checked} onChange={this.onChange}>受控</MCheckbox>
        </div>
        <br />
        <h3 className={'list_title'}>复写 options 全部</h3>
        <div className={`list_item`}>
          <MCheckbox customOptionRender={this.customOptionRender} data={datas} value={value} onChange={this.onChange2} isHoldRight>受控</MCheckbox>
        </div>
        <br />
        <h3 className={'list_title'}>复写整体 checkbox</h3>
        <div className={`list_item`}>
          <MCheckbox customOverlayRender={this.customOverlayRender} data={datas} value={value} onChange={this.onChange2} isHoldRight >受控</MCheckbox>
        </div>
      </div>
    );
  }
}
```

### 选项带提示信息

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

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

### 选框居左-横向排列

```jsx
import React from 'react';
import { FormItem, FormItemProps, constantsM, } from '@weapp/ui';
const items: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要接送",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: false,
      defaultValue: 'op2'
    }
  },
}
const items2: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要送餐",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: false,
      defaultValue: 'op1'
    }
  },
}

const items3: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: false,
      defaultValue: 'op1'
    }
  },
}
export default class RadioDemo extends React.Component {

  state = {
    checked: true,
    label: "已选择",
  }
  render() {
    const { checked } = this.state;
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_checkbox`}
      >
        <h3 className={'list_title'}>基础用法</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items}
            com={['checkbox']}
            label="是否需要接送"
            labelSpan={12}
          />
          <FormItem
            isMobile={true}
            item={items2}
            com={['checkbox']}
            label="是否需要接送"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果</h3>
        <div className={`list_item`}  style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>上下结构</h3>
        <div className={`list_item`}  style={{ padding: 0 }}>
        <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
      </div>
    );
  }
}
```

### 选框居右-横向排列

```jsx
import React from 'react';
import { FormItem, FormItemProps, MRadio, constantsM, } from '@weapp/ui';
const items: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要接送",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: false,
      isHoldRight: true,
      defaultValue: 'op2'
    }
  },
}
const items2: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要送餐",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: false,
      isHoldRight: true,
      defaultValue: 'op1'
    }
  },
}

const items3: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: false,
      isHoldRight: true,
      defaultValue: 'op1'
    }
  },
}

const items4: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: false,
      isHoldRight :true,
      defaultValue: 'op1',
      labelWrapperWidth:'100%'
    }
  },
}
export default class RadioDemo extends React.Component {

  state = {
    checked: true,
    label: "已选择",
  }
  render() {
    const { checked } = this.state;
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_checkbox`}
      >
        <h3 className={'list_title'}>基础用法</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items}
            com={['checkbox']}
            label="是否需要接送"
            labelSpan={12}
          />
          <FormItem
            isMobile={true}
            item={items2}
            com={['checkbox']}
            label="是否需要接送"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果，自定义labelWrapper宽度</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items4}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>上下结构</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
      </div>
    );
  }
}
```

### 选框居左-纵向排列

```jsx
import React from 'react';
import { FormItem, FormItemProps, MRadio, constantsM, } from '@weapp/ui';
const items: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要接送",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: true,
      defaultValue: 'op2',
      alignType: 'left'
    }
  },
}
const items2: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要送餐",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: true,
      defaultValue: 'op1',
      alignType: 'right'
    }
  },
}
const items21: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要送餐",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: true,
      defaultValue: 'op1',
      alignType: 'justify'
    }
  },
}

const items3: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: true,
      defaultValue: 'op1',
      alignType: 'left'
    }
  },
}
const items31: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: true,
      defaultValue: 'op1',
      alignType: 'right'
    }
  },
}
const items32: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: true,
      defaultValue: 'op1',
      alignType: 'justify'
    }
  },
}
export default class RadioDemo extends React.Component {

  state = {
    checked: true,
    label: "已选择",
  }
  render() {
    const { checked } = this.state;
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_checkbox`}
      >
        <h3 className={'list_title'}>左对齐</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items}
            com={['checkbox']}
            label="是否需要接送"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>右对齐</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items2}
            com={['checkbox']}
            label="是否需要送餐"
            labelSpan={12}
          />    </div>
        <h3 className={'list_title'}>两端对齐</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items21}
            com={['checkbox']}
            label="是否需要送餐"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果(左对齐)</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果(右对齐)</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items31}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果(两端对齐)</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items32}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>上下结构（左对齐）</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
        <h3 className={'list_title'}>上下结构（右对齐）</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items31}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
        <h3 className={'list_title'}>上下结构（两端对齐）</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items32}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
      </div>
    );
  }
}
```

### 选框居右-纵向排列

```jsx
import React from 'react';
import { FormItem, FormItemProps, MRadio, constantsM, } from '@weapp/ui';
const items: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要接送",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: true,
      isHoldRight :true,
      defaultValue: 'op2',
      alignType: 'left'
    }
  },
}
const items2: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要送餐",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: true,
      isHoldRight :true,
      defaultValue: 'op1',
      alignType: 'right'
    }
  },
}
const items21: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "是否需要送餐",
    data: [
      { id: 'op1', content: '是' },
      { id: 'op2', content: '否' },
    ],
    otherParams: {
      vertical: true,
      isHoldRight :true,
      defaultValue: 'op1',
      alignType: 'justify'
    }
  },
}

const items3: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: true,
      isHoldRight :true,
      defaultValue: 'op1',
      alignType: 'left'
    }
  },
}
const items31: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: true,
      isHoldRight :true,
      defaultValue: 'op1',
      alignType: 'right'
    }
  },
}
const items32: FormItemProps = {
  'checkbox': {
    itemType: "CHECKBOX",
    fieldName: "供应商确定方式",
    data: [
      { id: 'op1', content: '招投标' },
      { id: 'op2', content: '比价' },
      { id: 'op3', content: '指定供应商' },
      { id: 'op4', content: '其他，请注明' },
      { id: 'op5', content: '选项很长时单独一行我是很长名字的选项我是很长名字的选项我是很长名字的选项' },
    ],
    otherParams: {
      vertical: true,
      isHoldRight :true,
      defaultValue: 'op1',
      alignType: 'justify'
    }
  },
}
export default class RadioDemo extends React.Component {

  state = {
    checked: true,
    label: "已选择",
  }
  render() {
    const { checked } = this.state;
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_checkbox`}
      >
        <h3 className={'list_title'}>左对齐</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items}
            com={['checkbox']}
            label="是否需要接送"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>右对齐</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items2}
            com={['checkbox']}
            label="是否需要送餐"
            labelSpan={12}
          />    </div>
        <h3 className={'list_title'}>两端对齐</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items21}
            com={['checkbox']}
            label="是否需要送餐"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果(左对齐)</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果(右对齐)</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items31}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>选项多时的折行效果(两端对齐)</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items32}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={12}
          />
        </div>
        <h3 className={'list_title'}>上下结构（左对齐）</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items3}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
        <h3 className={'list_title'}>上下结构（右对齐）</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items31}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
        <h3 className={'list_title'}>上下结构（两端对齐）</h3>
        <div className={`list_item`} style={{ padding: 0 }}>
          <FormItem
            isMobile={true}
            item={items32}
            com={['checkbox']}
            label="供应商确定方式 Supplier identification method"
            labelSpan={24}
          />
        </div>
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 受控（单个使用时传递 Boolean) | RadioValueType |  |  |
| defaultValue | 默认值（单个使用时传递 Boolean) | RadioValueType |  |  |
| disabled | 禁用 | boolean |  | false |
| style | 自定义样式 | CSSProperties |  |  |
| className | 自定义 className | string |  |  |
| overlayClassName | 选项的样式名 | string |  |  |
| isHoldRight | checkbox 是否靠右显示 | boolean |  | false |
| onChange | 数据变化回调 | (value: ValueType, option: OptionData , e: RadioEvent) => void |  |  |
| onClick | 点击回调 | (value: ValueType, option: OptionData , e: RadioEvent) => void |  |  |
| customOptionRender | 自定义每一选项 | (props: RadioOptionProps, ele: ReactNode) => ReactNode |  |  |
| customOptionContenRender | 复写任一选项的 content 内容 | (props: RadioOptionProps, ele: ReactNode) => ReactNode |  |  |
| customOverlayRender | 复写整体 radio | (_: any, ele: ReactNode) => ReactNode |  |  |
| tips | 提示信息（如果是传递了 data，直接在 data 中设置） | string | false | - |
| alignType | 左右对齐方式（仅单个使用或者纵向排列时生效） | string |  | left |
| vertical | 是否纵向排列 | Boolean |  | true |
