| 属性 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| checked | 是否选中，如果在group中需使用value设置是否选中 | boolean | ||
| disabled | 是否禁用 | boolean | false | |
| onChange | 状态改变时的回调函数 | function(checked,e) | ||
| type | 复选框类型 | string（'normal'，'list'） | normal | |
| defaultChecked | 默认选中状态 | boolean | false |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 当前选择的值 | array | [] |
| onChange | 选中值发生改变后的回调 | function(value,e) | ()=>{} |
| dataSource | 可选数据源，数据源的结构见demo | array | [] |
rx中只提供了一个简单的textinput，因为会触发键盘，因此需要使用view和image结合的方式实现。从外观表现和交互逻辑上，单个radio和checkbox的表现是完全一致的。两者仅有的区别在于批量使用时，radio需要做到互斥。
/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Checkbox,Button } from 'nuke';
import {mount} from 'nuke-mounter';
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
checked:false
}
}
onChange(value){
alert(value);
}
changeControl(value){
this.setState({
checked:value
})
}
render() {
return (
<View>
<Text>基本使用----非受限用法</Text>
<Checkbox defaultChecked={true} size="small" onChange={this.onChange.bind(this)}></Checkbox>
<Text>基本使用----受限用法</Text>
<Checkbox checked={this.state.checked} size="small" onChange={this.changeControl.bind(this)}></Checkbox>
</View>
);
}
}
mount(<App/>, mountNode);
/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Checkbox,Button } from 'nuke';
// const isWeex = typeof callNative !== 'undefined';
import {mount} from 'nuke-mounter';
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
value:[3,1]
}
}
onChange(value){
console.log('GROUP CHANGE',value);
this.setState({
value:value
})
}
press(){
let tmp = this.state.value;
tmp.pop()
this.setState({
value:tmp
})
console.log(this.state.value);
}
render() {
return (
<View>
<Button onPress={this.press.bind(this)}>受限使用+{this.state.value}</Button>
<Checkbox.Group onChange={this.onChange.bind(this)} value={this.state.value}>
<Checkbox value={3} style={{marginTop:'10px'}} size="small"></Checkbox>
<Checkbox value={4} style={{marginTop:'10px'}} size="medium"></Checkbox>
</Checkbox.Group>
</View>
);
}
}
mount(<App/>, mountNode);
/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Checkbox,Button } from 'nuke';
// const isWeex = typeof callNative !== 'undefined';
import {mount} from 'nuke-mounter';
function unique(array){
var n = [];//临时数组
for(var i = 0;i < array.length; i++){
if(n.indexOf(array[i]) == -1) n.push(array[i]);
}
return n;
}
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
dataSource:[
{value: 'apple', label: '苹果'},
{value: 'pear', label: '梨', disabled: true},
{value: 'orange', label: '橘子'}
],
value:['apple']
}
}
changeData(){
let newSource = [
{value: 'apple', label: '苹果',disabled: true},
{value: 'pear', label: '梨',disabled: true},
{value: 'orange', label: '橘子',disabled: true}
];
this.setState({
dataSource:newSource
})
}
onChange(value){
this.setState({
value:value
})
console.log(this.state.value)
}
render() {
return (
<View>
<Button onPress={this.changeData.bind(this)}>点击切换datasource</Button>
<Checkbox.Group value={this.state.value} onChange={ this.onChange.bind(this) }size="small" dataSource={ this.state.dataSource }></Checkbox.Group>
</View>
);
}
}
mount(<App/>, mountNode);
