searchAlarm.3.js
1.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React from 'react';
import '../../css/style.css'
import axios from "axios"; //导入axios
import { DatePicker, Checkbox, Pagination, Button } from 'antd';
const { RangePicker } = DatePicker;
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['1', '2', '3'];
const defaultCheckedList = ['1', '3'];
class SearchAlarm extends React.Component {
state = {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
onChange = checkedList => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
});
};
onCheckAllChange = e => {
let that = this
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
},function(){
console.log(that.state.checkedList)
});
};
clickBtn = e =>{
console.log(this.state.checkedList)
}
render() {
let { data, currentPage, totalPage, defaultPageSize } = this.state
let that = this
return (
<div>
<div className="site-checkbox-all-wrapper">
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<Checkbox.Group style={{ width: '100%' }} onChange={this.onChange} value={this.state.checkedList}>
<Checkbox value="1">Apple</Checkbox>
<Checkbox value="2">Pear</Checkbox>
<Checkbox value="3">Orange</Checkbox>
</Checkbox.Group>
<Button type="primary" onClick={this.clickBtn}>Primary</Button>
</div>
);
}
};
export default SearchAlarm