@beisen-cmps/ux-checkbox-new

参数 说明 默认值 类型 是否必填 multiple 是否是多选 false-->单选 boolean 非必填 onChange 选择的change事件 无默认 (val: ICheckboxItem[] | ICheckboxItem | null) => void 多选的时候返回的是ICheckboxItem[]，单选的时候是ICheckboxItem 非必填 data 初始化源数据 无默认 ICheckboxItem[] 必填 wraperClass 包裹classname 无默认 string 非必填

Usage no npm install needed!

<script type="module">
  import beisenCmpsUxCheckboxNew from 'https://cdn.skypack.dev/@beisen-cmps/ux-checkbox-new';
</script>

README

新版平铺单选、多选组件，此组件兼容 react15 和 16

参数，详情请看 interface 定义

参数 说明 默认值 类型 是否必填
multiple 是否是多选 false-->单选 boolean 非必填
onChange 选择的change事件 无默认 (val: ICheckboxItem[] | ICheckboxItem | null) => void 多选的时候返回的是ICheckboxItem[]，单选的时候是ICheckboxItem 非必填
data 初始化源数据 无默认 ICheckboxItem[] 必填
wraperClass 包裹classname 无默认 string 非必填 
// 关于文本输入框的一些配置参数
interface ICheckboxItem {
    value: number | string //显示的value
    text: string //显示的文本
    isChecked?: boolean //是否选中
}

调用示范

import * as React from 'react'
import NewCheckbox from '../../src'
export default class extends React.Component<any, any> {
    constructor(props) {
        super(props)
    }
    handleChange(value) {
        console.log(value)
    }
    render(): JSX.Element {
        const newProps = {
            multiple: false,
            onChange: this.handleChange,
            data: [
                {
                    value: '1',
                    text: '文本1',
                    isChecked: false
                },
                {
                    value: '2',
                    text: '文本文本1',
                    isChecked: false
                },
                {
                    value: '3',
                    text: '文本文本本',
                    isChecked: false
                },
                {
                    value: '4',
                    text: '问问aaasad',
                    isChecked: false
                },
                {
                    value: '5',
                    text: '问问aaaaasad',
                    isChecked: false
                },
                {
                    value: '6',
                    text: '我问问任务分为服务阿达萨达萨达说萨达萨达大声点',
                    isChecked: false
                },
                {
                    value: '7',
                    text: '文本1',
                    isChecked: false
                },
                {
                    value: '8',
                    text: '文本1',
                    isChecked: false
                },
                {
                    value: '9',
                    text: '文本1',
                    isChecked: false
                }
            ],
            wraperClass: 'test2'
        }
        const otherProps = {
            multiple: true,
            onChange: this.handleChange,
            wraperClass: 'test',
            data: [
                {
                    value: '1',
                    text: '文本1',
                    isChecked: false
                },
                {
                    value: '2',
                    text: '文本文本1',
                    isChecked: false
                },
                {
                    value: '3',
                    text: '文本文本本',
                    isChecked: false
                },
                {
                    value: '4',
                    text: '问问aaasad',
                    isChecked: false
                },
                {
                    value: '5',
                    text: '问问aaaaasad',
                    isChecked: false
                },
                {
                    value: '6',
                    text: '我问问任务分为服务阿达萨达萨达说萨达萨达大声点',
                    isChecked: false
                },
                {
                    value: '7',
                    text: '文本1',
                    isChecked: false
                },
                {
                    value: '8',
                    text: '文本1',
                    isChecked: false
                },
                {
                    value: '9',
                    text: '文本1',
                    isChecked: false
                }
            ]
        }
        return (
            <div style={{ width: '320px' }}>
                <h3>====单选====</h3>
                <NewCheckbox {...newProps} />
                <br />
                <h3>====多选====</h3>
                <NewCheckbox {...otherProps} />
            </div>
        )
    }
}