1.0.2 • Published 5 years ago

@beisen-cmps/ux-checkbox-new v1.0.2

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
5 years ago

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

参数,详情请看 interface 定义

// 关于文本输入框的一些配置参数
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>
		)
	}
}