zent
Version:
一套前端设计语言和基于React的实现
88 lines (77 loc) • 2 kB
JavaScript
import React, { Component } from 'react';
import Checkbox from '../src';
import '../assets/index.scss';
/*
## 部分选中
*/
export default class Simple extends Component {
state = {
allChecked: false,
itemsChecked: [false, false, false]
}
onAllChange(e) {
let checked = e.target.checked;
this.setState({
allChecked: checked,
itemsChecked: [checked, checked, checked]
});
}
onItemsChange(index, e) {
const checked = e.target.checked;
const itemsChecked = this.state.itemsChecked;
itemsChecked[index] = checked;
this.setState({
itemsChecked: Array.from(itemsChecked)
});
if (this.everyItemsCheckedOrUnchecked()) {
this.setState({
allChecked: checked
});
}
}
// 项目是否全部选中或者全部没有选中
everyItemsCheckedOrUnchecked() {
const itemsChecked = this.state.itemsChecked;
return itemsChecked.every(item => item) || itemsChecked.every(item => !item);
}
render() {
const indeterminate = !this.everyItemsCheckedOrUnchecked();
return (
<div>
<Checkbox
checked={this.state.allChecked}
onChange={this.onAllChange.bind(this)}
indeterminate={indeterminate}
>
全选
</Checkbox>
<ul>
<li>
<Checkbox
checked={this.state.itemsChecked[0]}
onChange={this.onItemsChange.bind(this, 0)}
>
Item 0
</Checkbox>
</li>
<li>
<Checkbox
checked={this.state.itemsChecked[1]}
onChange={this.onItemsChange.bind(this, 1)}
>
Item 1
</Checkbox>
</li>
<li>
<Checkbox
checked={this.state.itemsChecked[2]}
onChange={this.onItemsChange.bind(this, 2)}
>
Item 2
</Checkbox>
</li>
</ul>
</div>
);
}
}