1.0.2 • Published 5 years ago
@beisen-cmps/ux-checkbox-new v1.0.2
新版平铺单选、多选组件,此组件兼容 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>
)
}
}